An ellipsis at the end of a line using CSS. Text-overflow in Firefox and all, all, all Final code for all browsers
Vlad Merzhevich
Despite the fact that large diagonal monitors are becoming more affordable, and their resolution is constantly growing, sometimes there is a task to fit a lot of text in a limited space. For example, this might be needed for mobile version site or for an interface in which the number of lines is important. In such cases, it makes sense to cut off long lines of text, leaving only the beginning of the sentence. So we will bring the interface to a compact form and reduce the amount of output information. Line cutting itself can be done on the server side using the same PHP, but it is easier through CSS, and you can always show the entire text, for example, when you hover over it with the mouse cursor. Next, consider the methods of how to cut text with imaginary scissors.
It really comes down to using the overflow property with a value of hidden . The differences only lie in the different display of our text.
Using overflow
In order for the overflow property to show itself with the text in all its glory, we need to cancel the text wrapping using white-space with a value of nowrap . If this is not done, then there will be no effect we need, hyphens will be added to the text and it will be displayed in its entirety. Example 1 shows how to trim long text with a specified set of style properties.
Example 1. overflow for text
HTML5 CSS3 IE Cr Op Sa Fx
Result this example shown in fig. one.
Rice. 1. The appearance of the text after applying the overflow property
As can be seen from the figure, there is only one drawback in general - it is not obvious that the text has a continuation, so the user must be made aware of this. For this, a gradient or ellipsis is usually used.
Adding a Gradient to Text
To make it clear that the text on the right does not end, you can apply a gradient from transparent to background color on top of it (Fig. 2). This will create the effect of gradual dissolution of the text.
Rice. 2. Gradient Text
Example 2 shows how to create this effect. The style of the element itself will practically remain the same, but the gradient itself will be added using the ::after pseudo-element and CSS3. To do this, we insert an empty pseudo-element through the content property and apply a gradient to it with different prefixes for the main browsers (example 2). It is easy to change the width of the gradient through width , you can also adjust the degree of transparency by replacing the value 0.2 with your own.
Example 2: Gradient Over Text
HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx
The intra-discrete arpeggio transforms the polyrange, this is the one-time vertical in the ultra-polyphonic polyphonic fabric.
This method does not work in Internet browser Explorer up to and including version 8.0 because it doesn't support gradients. But you can abandon CSS3 and make a gradient the old fashioned way, through a PNG-24 image.
This method is only compatible with plain background and in case background picture the gradient over the text will stand out.
ellipsis at the end of the text
An ellipsis can also be used instead of a gradient at the end of cropped text. Moreover, it will be added automatically using the text-overflow property. It is understood by all browsers, including older versions of IE, and the only downside to this property is its unclear status so far. This property seems to be included in CSS3, but the code with it does not pass validation.
Example 3 shows the use of the text-overflow property with a value of ellipsis , which adds an ellipsis. When you move the mouse cursor over the text, it is displayed in its entirety and highlighted in the background color.
Example 3: Using text-overflow
HTML5 CSS3 IE Cr Op Sa Fx
The result of this example is shown in Fig. 3.
Rice. 3. Text with ellipsis
The big advantage of these methods is that the gradient and ellipsis are not displayed if the text is short and fits entirely in the specified area. So the text will be rendered as normal when it is fully visible on the screen, and clipped when the element's width is reduced.
Many people have probably faced the problem when some text needs to be displayed in one line. In this case, the text can be very long, and the width of the block in which this text is located is usually limited, at least by the same size of the browser window. For these cases, the text-overflow property was invented, which is included in the CSS3 recommendation, and was first implemented in IE6, a very long time ago. If this property is used for a block, if its text is wider than the block itself, then the text is cut off and an ellipsis is placed at the end. Although not everything is so simple here, but we will return to this a little later.
With Internet Explorer, everything is clear, what about other browsers? And although the text-overflow property is currently excluded from the CSS3 specification, Safari supports it (at least in the 3rd version), Opera too (since the 9th version, though the property is called -o-overflow-text).But Firefox doesn't, it doesn't support it, and it won't even be in the 3rd version.It's sad, but true.But maybe something can be done?
Of course you can do it. When I searched the Internet about this property, and how to deal with it in Firefox, I came across with a simple solution. The essence of the solution:
That's all. Read the article for details.
The solution is not bad, but there are problems:
- The text can be cut off in the middle (relatively speaking) of the letter, and we will see its "stump".
- The ellipsis is always displayed, even when the text is smaller than the width of the block (that is, it does not fall out of it and the ellipsis is not needed).
Step one
First, let's focus on the second problem, which is how to avoid displaying ellipsis when it's not needed. After racking my brains and "a little" experimenting, I found some solution. I'll try to explain.
The bottom line is that we need a separate block with ellipsis, which will only appear when the text takes up too much space in width. Then I came up with the idea of a falling floating block. Although it sounds scary, but here, it just means a block that is always there and is pushed to the right, but when the text width becomes large, the text pushes the block to the next line.
Let's move on to practice, otherwise it's hard to explain. Let's set the HTML structure:
very long text
It's not very compact, but I couldn't make it smaller. So, we have a DIV.ellipsis container block, a block with our text, and another block that will contain an ellipsis. Note that the "ellipsis box" is actually empty, because we don't need the extra three dots when we copy the text. Also, do not be afraid of the lack of additional classes, since this structure is well addressed through CSS selectors. And here is the CSS itself:
.ellipsis ( overflow: hidden; white-space: nowrap; line-height: 1.2em; height: 1.2em; border: 1px solid red; ) .ellipsis > DIV:first-child ( float: left; ) .ellipsis > DIV + DIV ( float: right; margin-top: -1.2em; ) .ellipsis >
That's all. We check and make sure that in Firefox, Opera, Safari works as intended. In IE, a very strange, but predictable, result. In IE6, everything has gone, and in IE7 it simply does not work, since it does not support generated content. But we will return to IE later.
For now, let's take a look at what we've done. First, we set the line-height and height of the main box, since we need to know the height of the box and the height of the text line. We set the same value for the margin-top of the block with ellipsis, but with a negative value. Thus, when the block is not “dropped” to the next line, it will be above the line of text (one line), when it is dropped, it will be at its level (in fact, it is lower, we just pull one line up). To hide the excess, especially when we don't need to show the ellipsis, we do overflow: hidden for the main block, so when the ellipsis is above the line, it will not be shown. This also allows us to remove the text that falls outside the block (to the right edge). To prevent the text from unexpectedly wrapping and pushing the block with ellipsis down and down, we do white-space: nowrap, thereby prohibiting wrapping - our text will always be on one line. For the block with text, we set float: left so that it does not immediately dump the block with ellipsis and takes the minimum width. Since inside the main block (DIV.ellipsis) both blocks are floating (float: left/right), the main block will collapse when the text block is empty, so we set a fixed height for the main block (height: 1.2em). And finally, we use the pseudo-element::after to display the ellipsis. For this pseudo-element, we also set the background to overlap the text that will appear below it. We set a frame for the main block, just to see the dimensions of the block, we will remove it later.
If Firefox were as good at supporting pseudo-elements as Opera and Safari in terms of positioning them (setting them to position/float etc), then we wouldn't have to use a separate block for the ellipsis. Try replacing the last 3 rules with the following:
.ellipsis > DIV:first-child::after ( float: right; content: "..."; margin-top: -1.2em; background-color: white; position: relative; )
in Opera and Safari, everything works as before, and without the extra ellipsis block. But Firefox is disappointing. But it is for him that we make the decision. Well, you'll have to make do with the original HTML structure.
step two
As you can see, we got rid of the problem of ellipsis appearing when the text fits in the block. However, we still have one more problem - the text is cut off in the middle of the letters. And besides, it doesn't work in IE. To overcome both, you need to use the native text-overflow rule for browsers, and only for Firefox use the solution described above (there is no alternative). How to make a solution "only for Firefox" will be discussed later, but now we will try to make it work with what we have using text-overflow. Let's tweak the CSS:
.ellipsis ( overflow: hidden; white-space: nowrap; line-height: 1.2em; height: 1.2em; border: 1px solid red; text-overflow: ellipsis; -o-text-overflow: ellipsis; width: 100% } .ellipsis * ( display: inline; ) /*.ellipsis > DIV:first-child ( float: left; ) .ellipsis > DIV + DIV ( float: right; margin-top: -1.2em; ) .ellipsis > DIV + DIV::after ( background-color: white; content: "..."; ) */
Edit, as it turned out, not much. Three lines have been added to the style of the main block. Two of them include text-overflow. Setting width: 100% is necessary for IE so that the text does not expand the block to infinity, and the text-overflow property works; in essence, we have limited the width. On the idea of DIV, like everyone else block elements, stretches across the entire width of the container, and width: 100% is useless, and even harmful, but IE has a layout problem, since the container always stretches to fit the content, so it can’t be otherwise. We also made all internal elements inline (inline), because for some browsers (Safari & Opera) text-overflow will not work otherwise, since there are block elements inside. We have commented out the last three rules because in this case they are not needed and break everything (conflict). These rules will only be needed for Firefox.
Let's see what we got and continue.
Step Three
When I once again looked at the page (before I was going to write this article), mentioned at the very beginning, then, for the sake of interest, I looked through the comments for clever related ideas. And I found, in a comment, where it was said about another solution that works in Firefox and IE (for this person, as well as for the author of the first article, other browsers apparently do not exist). So, in this solution, the author struggles with this phenomenon (lack of text-overflow) in a slightly different way, hanging handlers on the overflow and underflow events for elements for which it was necessary to put an ellipsis if necessary. Not bad, but it seems to me that this solution is very expensive (in terms of resources), especially since it has some bugs. However, while figuring out how he achieved this, he came across an interesting thing, namely the -moz-binding CSS property. As far as I understand, this is an analogue of behavior in IE, only under a different sauce and more abruptly. But we will not go into details, we will only say that in this way you can hang a JavaScript handler on an element with using CSS. Sounds weird, but it works. What are we doing:
.ellipsis ( overflow: hidden; white-space: nowrap; line-height: 1.2em; height: 1.2em; border: 1px solid red; text-overflow: ellipsis; -o-text-overflow: ellipsis; width: 100% ; -moz-binding: url(moz_fix.xml#ellipsis); zoom: 1;) .ellipsis * ( display: inline; ) .moz-ellipsis > DIV:first-child( float: left; display:block; } .moz-ellipsis > DIV + DIV( float: right; margin-top: -1.2em; display:block; } .moz-ellipsis > DIV + DIV::after( background-color: white; content: "..."; )
As you can see, we again made not many changes. At this step in IE7 there is a strange glitch, everything is skewed if you do not set zoom: 1 for the main block (the easiest option). If you remove (delete, comment out) the .ellipsis * or .moz-ellipsis > DIV + DIV rule (which has nothing to do with IE7 at all), then the glitch disappears. All this is strange, if anyone knows what's wrong, let me know. For now, let's get by with zoom: 1 and move on to Firefox.
The -moz-binding property binds the moz_fix.xml file with an instruction with the identifier ellipsis. The content of this xml file is as follows:
All this constructor does is add the moz-ellipsis class to the element for which the selector worked. This will only work in Firefox (gecko browsers?), so only in it will the moz-ellipsis class be added to the elements, and we can add additional rules for this class. What they were striving for. I'm not quite sure about the need for this.style.mozBinding = "", but from experience with expression it's better to play it safe (in general, I'm not familiar with this side of Firefox, so I could be mistaken).
You may be warned that this technique uses an external file and JavaScript in general. You should not be afraid. Firstly, if the file does not load and / or JavaScript is disabled and does not work, it's okay, the user simply does not see the ellipsis at the end, the text will be cut off at the end of the block. That is, in this case we get an "unobtrusive" solution. You can see for yourself.
Thus, we got a style for the Big Four browsers that implements text-overflow for Opera, Safari & IE, and emulates it for Firefox, not so hot, but it's better than nothing.
Step Four
At this point, it would be possible to put an end to it, but we would like to slightly improve our solution. Since we can hang a constructor on any block and accordingly get control over it, why not take advantage of this. Let's simplify our structure:
very long text
Oh yeah! I think you will agree with me - this is what you need!
Now let's remove all unnecessary from the style:
.ellipsis ( overflow: hidden; white-space: nowrap; line-height: 1.2em; height: 1.2em; text-overflow: ellipsis; -o-text-overflow: ellipsis; width: 100%; -moz-binding: url(moz_fix.xml#ellipsis); ) .moz-ellipsis > DIV:first-child ( float: left; ) .moz-ellipsis > DIV + DIV ( float: right; margin-top: -1.2em; ) .moz -ellipsis > DIV + DIV::after ( background-color: white; content: "..."; )
We finally removed the red border :)
And now, let's add a little to our moz_fix.xml:
What's going on here? We recreate our initial HTML structure. That is, those difficulties with blocks are done automatically, and only in Firefox. JavaScript code is written in the best traditions :)
Unfortunately, we cannot avoid the situation when the text is cut off in the middle of the letter (albeit, perhaps temporarily, since my solution is still very raw, and in the future it may turn out). But we can smooth this effect a little. For this we need an image (a white background with a transparent gradient), and a few changes to the style:
.moz-ellipsis > DIV:first-child ( float: left; margin-right: -26px;) .moz-ellipsis > DIV + DIV ( float: right; margin-top: -1.2em; background: url(ellipsis.png) repeat-y; padding-left: 26px; }
Watch and enjoy life.
Let's put an end to this.
Conclusion
I will give a small example, for third-party layout. I took the table of contents of one of the Wikipedia pages (the first one that came up) and applied the method described above to it.
In general, this solution can be called universal only with a stretch. It all depends on your layout and its complexity. You may need a file, or maybe a tambourine. Although in most cases, I think it will work. And then, you now have a starting point;)
I hope you learned something interesting and useful from the article;) Learn, experiment, share.
Good luck!
How sometimes annoying are the long names of product links - three lines each - or long headings of other blocks. How great it would be if it were possible to somehow tighten the whole thing, make it more compact. And when hovering with the mouse, already show the title in full.
To do this, our favorite CSS will come to our aid. It's very simple, look.
Let's say we have the following block from a product catalog:
Here is its structure:
Great product at a super price, only 100 rubles. Brighten up your lonely evenings and give a surge of vitality!
Here are his styles:
Someblock( border: 1px solid #cccccc; margin: 15px auto; padding: 10px; width: 250px; ) .header( border-bottom: 1px dashed; font-size: 16px; font-weight: bold; margin-bottom: 12px ; )
Agree, it looks terrible. Of course, you can shorten the name of the product. But what if there are hundreds or thousands of them? You can also use php to cut off part of the name, limiting yourself to a certain number of characters. But what if the layout changes later and the blocks are smaller or vice versa 2-3 times larger? All this is not an option, all this does not suit us.
And here CSS comes to the rescue and its magic property text overflow. But it needs to be properly used in conjunction with a few other properties. Below I will show you a ready-made solution, after which I will explain what's what.
So, putting aside manual editing of product names and programmatic trimming of styles, we take CSS in hand and see what we get:
Miracle Yudo power-giver evening, mysterious, art. 20255-59
Great product at a super price, only 100 rubles. Brighten up your lonely evenings and give a surge of vitality!
Well, is it better? In my opinion very much! And bring the mouse to the name ... voila! Here it is shown to us in full.
Nothing has changed in our structure, I just added a diva with a class .header title tag. Here are the new styles:
Someblock( border: 1px solid #cccccc; margin: 15px auto; padding: 10px; width: 250px; ) .header( border-bottom: 1px dashed; font-size: 16px; font-weight: bold; margin-bottom: 12px ; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; )
See what we've done:
- We have added a property to the block white-space: nowrap, which removes the possibility of wrapping words on a new line from the text, thereby stretching it into a line;
- We then added a property overflow: hidden, which limited the visibility of our line to the width of the block, thereby cutting off everything superfluous and not showing it to the visitor;
- Well, at the end, we added an ellipsis to our string through the property text-overflow: ellipsis, thus letting the visitor understand that this is not the end of the line, and that it is necessary, probably, to bring the mouse up and see it in full.
Love CSS, learn CSS, and website building won't seem like such a difficult thing to you =)
The introduction of CSS3 is bringing about a revolutionary change in the daily life of web designers. CSS3 never ceases to amaze us every day. Things that were previously only possible with javascript are now easily done with CSS3. So, for example, the Text-Overflow.
Sometimes in the process of creating sites, we need to hide part of the dynamic text without moving to the next line. That is, insert long text into a table with a fixed width. At the same time, it is necessary to show the user that the visible part of the text is not everything. There is also a hidden part. This can be shown using an ellipsis (...).
With CSS3 we can easily do this using css property text overflow
markup
text-overflow: ellipsis;
Meaning ellipsis allows you to add an ellipsis (...) after the text
The text-overflow: ellipsis property is useful when:
1. Text goes outside the cell
2. There is free space in the cell: nowrap.
We have a 150px wide div to display the company name from the database. But at the same time, we do not want long company names to jump to a new line and spoil appearance tables. That is, we need to hide text that goes beyond 150 pixels. We also want to inform the user about this. So that he meant that not all the title is displayed. And we want to display all the text when hovering the mouse.
Let's take a look at how we can do this with CSS3.
Company-wrap ul li (
text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap; )
- company name
- Envestnet Asset Management
- Russell Investments
- Northwestern Mutual Financial Network
- ING Financial Networks
Browser support
With browser support, this property has one small nuance. Everything except firefox displays correctly. But, fortunately, there is a solution to this problem!
Ellipsis in Firefox
Unfortunately, Firefox's gecko (page rendering engine) does not support this feature. However, this browser supports XBL, with which we will get out of this situation.
Gecko is a free web page display engine (English layout engine) browsers Mozilla Firefox, Netscape and others. The old names are "Raptor" and "NGLayout". Gecko's main concept is to support open web standards such as HTML, CSS, W3C DOM, XML 1.0, and JavaScript. Another concept is cross-platform. Today, Gecko works in operating rooms Linux systems, Mac OS X, FreeBSD and Microsoft Windows, as well as on Solaris, HP-UX, AIX, Irix, OS/2, OpenVMS, BeOS, Amiga and more.
To display the ellipsis in firefox, we need to add one line to the stylesheet.
if you want to disable the property, just add:
moz-binding: url("bindings.xml#none");
The next step is to create a bindings.xml file in the same place where the style sheet is stored. We can use any text editor for this! Copy the code below and name the file bindings.xml.
var strings= this.textContent.split(/\s+/g)
if(!strings[ 0 ]) strings.shift()
if(!strings[ strings.length - 1 ]) strings.pop()
this.value=strings.join(" ")
this.display=strings.length ? "" : "none"
Final code for all browsers
Company-wrap ul li (
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url("bindings.xml#ellipsis");
white-space: nowrap;
overflow: hidden;
}
CSS3 is becoming the web designer's premier tool around the world to create never-before-seen websites with minimal code. There are simple one-line solutions that were previously only possible with Photoshop or javascript. Start exploring the power of CSS3 and HTML5 today and you won't regret it!
To stand out from the gray mass of translators and win your sympathy, dear readers, at the end of my lessons there will be wise thoughts and aphorisms. Everyone in these lines will find something of their own :)
Bear with dignity what you cannot change.
