Trimming single or multi-line text by height with the addition of an ellipsis. An ellipsis at the end of a line using CSS. Add an ellipsis to the end of the second line.
Many people have probably encountered the problem when some text needs to be displayed on one line. Moreover, the text can be quite long, and the width of the block in which this text is located is usually limited to at least the same size of the browser window. For these cases, the text-overflow property was invented, which was included in the CSS3 recommendation, and was first implemented in IE6, a very long time ago. When using this property 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 everything is not so simple here, we will return to this a little later.
WITH Internet Explorer"Om 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 version 3), Opera too (from version 9, though the property is called -o-overflow-text). But Firefox doesn’t, it doesn’t support it, and even in version 3 it won’t. It’s sad, but true. But maybe something can be done?
Of course, it can be done. When I was looking on the Internet about this property, and how to do it in Firefox, I came across simple solution. The essence of the solution:
That's all. Read the article for details.
The solution is not bad, but there are problems:
Let's first focus on the second problem, namely how to avoid displaying ellipsis when it is not needed. After racking my brains and experimenting “a little,” I found a solution. I'll try to explain.
The point is that we need a separate block with an ellipsis that 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, it just means a block that is always there and pressed to the right, but when the width of the text becomes large, the text pushes the block onto the next line.
Let's move on to practice, otherwise it's difficult to explain. Let's set HTML structure:
Not very compact, but I couldn’t do anything smaller. So, we have a container block DIV.ellipsis, a block with our text and another block that will contain the ellipsis. Note that the “ellipsis block” is actually empty, because we don’t need the extra three dots when we copy the text. Also, don’t be afraid of the lack of additional classes, since this structure 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 it works as intended in Firefox, Opera, Safari. In IE there is a very strange, but predictable result. In IE6 everything is gone, but in IE7 it simply does not work, since it does not support generated content. But we'll come back to IE later.
For now, let's look at what we've done. First, we set the line-height and height of the main block, since we need to know the height of the block and the height of the text line. We set the same value for the margin-top of the block with an ellipsis, but with a negative value. Thus, when the block is not “reset” to the next line, it will be above the text line (one line), when it is reset, it will be at its level (in fact, it is lower, we just pull it one line up). To hide unnecessary things, especially when there is no need to show the ellipsis, we make 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 text that falls outside the block (to the right edge). To prevent the text from unexpectedly wrapping and pushing the block with the ellipsis lower and lower, we make white-space: nowrap, thereby prohibiting hyphens - our text will always be on one line. For the block with text, we set float: left so that it does not immediately collapse the block with the ellipsis and takes up 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 for the main block we set a fixed height (height: 1.2em). And lastly, we use the ::after pseudo-element to display the ellipsis. For this pseudo-element we also set a background to cover the text that will appear under it. We set a frame for the main block just to see the dimensions of the block; later we will remove it.
If Firefox supported pseudo-elements as well as Opera and Safari in terms of their positioning (setting position/float etc for them), then it would be possible not to use a separate block for ellipses. Try replacing the last 3 rules with the following:
in Opera and Safari, everything works as before, and without the additional 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 may have noticed, we got rid of the problem of ellipses appearing when the text fits in a 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). We’ll figure out how to make a solution “only for Firefox” later, but now let’s try to make what we have work using text-overflow. Let's tweak the CSS:
As it turned out, there is not much to edit. Three lines have been added to the main block style. Two of them include text-overflow. Setting the width to 100% is necessary for IE so that the text does not expand the block to infinity, and the text-overflow property works; essentially we limited the width. In theory, DIV, like all block elements, stretches across the entire width of the container, and width: 100% is useless, and even harmful, but IE has a problem with layout, since the container always stretches to fit the content, so there is no other way. We also made all internal elements inline, because for some browsers (Safari & Opera) text-overflow will not work otherwise, since there are block elements inside. We commented out the last three rules, since 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, out of curiosity, I looked through the comments for smart related ideas. And I found it in a comment that talked about another solution that works in Firefox and IE (for this person, as for the author of the first article, apparently there are no other browsers). So, in this solution, the author deals with this phenomenon (the absence of text-overflow) in a slightly different way, attaching handlers to the overflow and underflow events to 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 is somewhat glitchy. However, while figuring out how he achieved this, he came across an interesting thing, namely the CSS property -moz-binding. As far as I understand, this is an analogue of behavior in IE, only with a different sauce and cooler. But we won’t go into details, let’s just say that in this way you can attach a JavaScript handler to an element with using CSS. It sounds strange, but it works. What are we doing:
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 simplest option). If you remove (delete, comment out) the rule .ellipsis * or .moz-ellipsis > DIV + DIV (which does not affect IE7 at all), then the glitch disappears. This is all strange, if anyone knows what's wrong, let me know. For now, we'll make do with zoom: 1 and move on to Firefox.
The -moz-binding property includes the moz_fix.xml file with an instruction with the identifier ellipsis. Contents of this xml file following:
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 the moz-ellipsis class will be added to the elements, and we can add additional rules for this class. That's what they wanted. I’m not entirely sure about the need for this.style.mozBinding = “”, but from experience with expression, it’s better to be on the safe side (in general, I’m not very familiar with this side of Firefox, so I could be mistaken).
You may be alarmed that this technique uses external file and JavaScript in general. There is no need to be afraid. Firstly, if the file does not load and/or JavaScript is disabled and does not work, it’s okay, the user simply will 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, which implements text-overflow for Opera, Safari & IE, and emulates it for Firefox, not very well, but it’s better than nothing. Step four
We could put an end to this point, but we would like to improve our solution a little. Since we can attach a constructor to any block and, accordingly, gain control over it, why not take advantage of this. Let's simplify our structure:
Oh yeah! I think you will agree with me - this is what you need!
Now let’s remove all unnecessary things 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've finally removed the red border :)
Now, let’s add a little to our moz_fix.xml:
What's going on here? We are recreating 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 (though, perhaps temporarily, since my solution is still very crude, and it may work in the future). But we can smooth out this effect a little. To do 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; )
Let's look and enjoy life.
Let's put an end to this. Conclusion
I’ll give you 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 decision 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!
Vlad Merzhevich
Despite the fact that large diagonal monitors are becoming more affordable and their resolution is constantly increasing, sometimes the task arises of fitting a lot of text in a limited space. For example, this may 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 trim long lines text, leaving only the beginning of the sentence. This way we will bring the interface to a compact form and reduce the amount of information displayed. The line trimming itself can be done on the server side using the same PHP, but it’s easier through CSS, and you can always show the entire text, for example, when you hover the mouse cursor over it. Next, we’ll look at methods for cutting text with imaginary scissors.
In reality, it all comes down to using the overflow property with the value hidden . The differences only lie in the different display of our text.
Using overflowIn order for the overflow property to show itself with text in all its glory, you need to unwrap the text using white-space with the value nowrap . If this is not done, then the effect we need will not occur; hyphens will be added to the text and the entire text will be displayed. Example 1 shows how to trim long text the specified set of style properties.
Example 1. overflow for text
HTML5 CSS3 IE Cr Op Sa Fx
Text .size ( white-space: nowrap; /* Cancel text wrapping */ overflow: hidden; /* Crop content */ background: #fc0; /* Background color */ padding: 5px; /* Margins */ )
Result this example shown in Fig. 1.
Rice. 1. The appearance of the text after applying the overflow property
As can be seen from the figure, there is generally one drawback - it is not obvious that the text has a continuation, so the user must be made aware of this. This is usually done using a gradient or ellipsis.
Adding a Gradient to TextTo make it clearer that the text on the right does not end, you can overlay a gradient from a transparent color to the background color on top of it (Fig. 2). This will create the effect of the text gradually dissolving.
Rice. 2. Gradient text
Example 2 shows how to create this effect. The style of the element itself will remain practically the same, but we will add the gradient itself 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 major browsers (example 2). The width of the gradient can be easily changed using 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
Text .size ( white-space: nowrap; /* Cancel text wrapping */ overflow: hidden; /* Crop content */ padding: 5px; /* Margins */ background: #fc0; /* Background color */ position: relative ; /* Relative positioning */ ) .size::after ( content: ""; /* Output the element */ position: absolute; /* Absolute positioning */ right: 0; top: 0; /* Position of the element */ width : 40px; /* Gradient width*/ height: 100%; /* Parent height */ /* Gradient */ background: -moz-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%) ; background: -webkit-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%); background: -o-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100 %); background: -ms-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%); background: linear-gradient(to right, rgba(255,204,0, 0.2), #fc0 100 %)); )
An intra-discrete arpeggio transforms a polyseries; this is a one-time vertical in a super polyphonic fabric.
This method does not work in Internet browser Explorer up to version 8.0 inclusive, because it does not support gradients. But you can abandon CSS3 and make a gradient the old fashioned way, through an image in PNG-24 format.
This method can only be combined with a plain background and in the case of background picture the gradient over the text will catch your eye.
Ellipsis at the end of the textYou can also use an ellipsis at the end of cropped text instead of a gradient. 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 drawback of this property is that its status is currently unclear. CSS3 seems to include this property, but the code with it does not pass validation.
Example 3 shows the use of the text-overflow property with the value ellipsis, which adds an ellipsis. When you hover your mouse over the text, it is displayed in its entirety and highlighted in a background color.
Example 3: Using text-overflow
HTML5 CSS3 IE Cr Op Sa Fx
Text .size ( white-space: nowrap; /* Cancel text wrapping */ overflow: hidden; /* Crop content */ padding: 5px; /* Margins */ text-overflow: ellipsis; /* Ellipsis */ ) .size :hover ( background: #f0f0f0; /* Background color */ white-space: normal; /* Normal text wrapping */ ) The unconscious causes contrast, this is identified by Lee Ross as a fundamental attribution error, which can be seen in many experiments.
The result of this example is shown in Fig. 3.
Rice. 3. Text with ellipses
The big advantage of these methods is that the gradient and ellipses are not displayed if the text is short and fits entirely into a given area. So the text will be displayed as usual when it is completely visible on the screen and will be cut off when the width of the element is reduced.
The introduction of CSS3 entails revolutionary changes in the daily routine of web designers. CSS3 continues to amaze us every day. Things that previously could only be done with using javascript, are now easily done with CSS3. For example, the Text-Overflow property.
Sometimes in the process of creating websites 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 accomplish this using CSS property text-overflow
Marking
Text-overflow: ellipsis;
Meaning ellipsis allows you to add an ellipsis after the text (...)
The text-overflow: ellipsis property is useful when:
1. Text extends beyond the cell
2. There is free space in the cell: nowrap.
We have a div with a width of 150 pixels to display the names of companies from the database. But at the same time, we don’t want long company names to jump to a new line and spoil appearance tables. That is, we need to hide text that extends beyond 150 pixels. We also want to inform the user about this. So that he means that not the entire title is displayed. And we want all the text to be displayed when the mouse is hovered.
Let's take a look at how we can do this using CSS3.
Company-wrap ul li (
text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap; )
- Company Name
- Asset Management">Envestnet Asset Management
- Russell Investments
- Northwestern Mutual Financial Network
- ING Financial Networks
Browser support
With cross-browser support of this property There is one small nuance. All except firefox display correctly perfectly. But, fortunately, there is a solution to this problem!
Three dots in Firefox
Unfortunately, gecko (the rendering engine in Firefox) does not support this property. However this browser supports XBL, with the help of which we will get out of this situation.
Gecko is a free web page layout engine for browsers Mozilla Firefox, Netscape and others. Old names are "Raptor" and "NGLayout". Gecko's core 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 on operating systems Linux, Mac OS X, FreeBSD and Microsoft Windows, as well as on Solaris, HP-UX, AIX, Irix, OS/2, OpenVMS, BeOS, Amiga and others.
To display ellipsis in firefox, we need to add one line to the style sheet.
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 location where the stylesheet is stored. We can use any text editor for this! Copy the code below and name the file bindings.xml.
document.getAnonymousNodes(this)[ 0 ]
this.label.style
this.style.display
if(this.style.display != val) this.style.display= val
this.label.value
if(this.label.value != val) this.label.value= val
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"
this.update()
this.update()
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 go-to tool for web designers around the world to create never-before-seen websites with minimal code. There are simple, literally one-line solutions that were previously only possible using Photoshop or javascript. Start learning the power of CSS3 and HTML5 today and you won't regret it!
In order 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 will find something of their own in these lines :)
Bear with dignity what you cannot change.
How sometimes annoying are the long names of product links - three lines each - or the long headings of other blocks. How great it would be if this whole thing could be somehow narrowed down, made more compact. And when you hover the mouse over it, show the title in full.
For this, our favorite CSS will come to our aid. It's very simple, look.
Let's say we have a block like this from a product catalog:
Here is its structure:
Miracle Yudo evening power giver, mysterious, art. 20255-59
A wonderful product at a super price, only 100 rubles. It will brighten up your lonely evenings and give you 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 using php cut off part of the name, limiting it to a certain number of characters. But what if the layout changes later and the blocks are smaller or, on the contrary, 2-3 times larger? None of this is an option, none of this suits us.
And here CSS and its magical text-overflow property comes to our aid. But it needs to be used correctly in conjunction with several 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 software cropping of styles, we take CSS hands and see what we get:
Miracle Yudo evening power giver, mysterious, art. 20255-59
A wonderful product at a super price, only 100 rubles. It will brighten up your lonely evenings and give you a surge of vitality!
Well, is it better? In my opinion, very much so! And move your mouse over the title... voila! Here it is shown to us in full.
Nothing has changed in our structure, I just added a div with the .header class and the title tag. And here are the new, updated 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; )
Look what we did:
- We added the white-space: nowrap property to the block, which removes the ability for the text to wrap words onto a new line, thereby stretching it into a line;
- Then we added the overflow: hidden property, which limited the visibility of our line to the width of the block, thereby cutting off all the excess and not showing it to the visitor;
- Well, at the end we added an ellipsis to our line using the text-overflow: ellipsis property, thereby letting the visitor know that this is not the end of the line, and that they probably need to move their mouse and look at it in full.
Love CSS, learn CSS, and website building won't seem so difficult to you =)
Defines the visibility parameters of text in a block if the entire text does not fit into the specified area. There are two options: the text is cut off; the text is cut off and an ellipsis is added to the end of the line. text-overflow works if the block's overflow property is set to auto , scroll or hidden .
Brief informationNotations| Indicates the type of the value. | ||
| A && B | The values must be output in the order specified. | && |
| A | B | Indicates that you need to select only one value from the proposed ones (A or B). | normal | small-caps |
| A || B | Each value can be used independently or together with others in any order. | width || count |
| Groups values. | [ crop || cross ] | |
| * | Repeat zero or more times. | [,]* |
| + | Repeat one or more times. | + |
| ? | The specified type, word, or group is optional. | inset? |
| (A, B) | Repeat at least A, but no more than B times. | {1,4} |
| # | Repeat one or more times separated by commas. | # |
clip The text is clipped to fit the area. ellipsis The text is truncated and an ellipsis is added to the end of the line.
Exampletext-overflow p.clip ( white-space: nowrap; /* Disable line wrapping */ overflow: hidden; /* Crop everything that does not fit into the area */ background: #fc0; /* Background color */ padding: 5px ; /* Margins around the text */ text-overflow: ellipsis; /* Add an ellipsis */ )
The magnetic field negligibly dampens the great circle of the celestial sphere, in which case the eccentricities and inclinations of the orbits increase.
The result of this example is shown in Fig. 1.
Rice. 1. Ellipsis at the end of the text
Object ModelAn object.style.textOverflow
NoteOpera before version 11 uses the -o-text-overflow property.
SpecificationEach specification goes through several stages of approval.
- Recommendation - The specification has been approved by the W3C and is recommended as a standard.
- Candidate Recommendation - The group responsible for the standard is satisfied that it meets its goals, but requires help from the development community to implement the standard.
- Proposed Recommendation - At this stage, the document is submitted to the W3C Advisory Council for final approval.
- Working Draft - A more mature version of a draft that has been discussed and amended for community review.
- Editor's draft (Editorial draft) - a draft version of the standard after amendments have been made by the project editors.
- Draft (Draft specification) - the first draft version of the standard.
