Css ellipsis at the end. Text-overflow in Firefox and everything, everything, everything

Determines the visibility of the text in the 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 when the overflow property is set to auto, scroll, or hidden for a block.

brief information

Designations

The values

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.

Example

The magnetic field negligibly extinguishes 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.

Figure: 1. Ellipsis at the end of the text

Object Model

An object.style.textOverflow

Note

Opera prior to version 11 uses the -o-text-overflow property.

Specification

Each specification goes through several stages of approval.

• Recommendation - This specification is endorsed by the W3C and recommended as a standard.
• Candidate Recommendation ( Possible recommendation) - the group responsible for the standard is satisfied that it is in line with its objectives, but the help of the developer community is required to implement the standard.
• Proposed Recommendation ( Suggested recommendation) - At this point, the document is submitted to the W3C Advisory Council for final approval.
• Working Draft - A more mature version of the draft after discussion and revision for community review.
• Editor "s draft ( Editorial draft) - a draft version of the standard after editing by the project editors.
• Draft ( Draft specification) is the first draft of the standard.

Vlad Merzhevich

Despite the fact that monitors of large diagonals are becoming more and more accessible, and their resolution is constantly growing, sometimes the task arises in a limited space to fit a lot of text. For example, this may be necessary for the mobile version of the site or for an interface where the number of lines is important. In such cases, it makes sense to trim 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 information displayed. The actual trimming of lines can be done on the server side using the same PHP, but through CSS it is easier, moreover, you can always show the entire text, for example, when you hover over it with the mouse cursor. Next, we will consider methods of how to cut the text with imaginary scissors.

In fact, it all comes down to using the overflow property with the hidden value. The differences only lie in the different display of our text.

Using overflow

For the overflow property to show itself with text in all its glory, you need to undo the text wrapping using white-space with the value nowrap. If this is not done, then the effect we need will not be, hyphenation 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

The result of this example is shown in Fig. 1.

Figure: 1. Type of text after applying the overflow property

As you can see 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. This is usually done with a gradient or ellipsis.

Adding a gradient to the text

To make it clearer that the text on the right does not end, you can overlay it with a gradient from transparent to background color (Figure 2). This will create the effect of gradual dissolution of the text.

Figure: 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, 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 through the width, you can also adjust the transparency level by replacing the value 0.2 with your own.

Example 2. Gradient over text

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Intra-discrete arpeggio transforms the poly-row, this is a one-step vertical in an ultra-polyphonic fabric.

This method does not work in Internet Explorer up to version 8.0, because it does not support gradients. But you can give up CSS3 and make the gradient the old-fashioned way, using a PNG-24 image.

This method only works with a solid background, and in the case of a background image, the gradient over the text will be striking.

Ellipsis at the end of the text

You can also use ellipsis instead of a gradient at the end of clipped 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 drawback of this property is its still unclear status. It seems like this property is included in CSS3, 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 the mouse cursor over the text, it is displayed in full and highlighted with a background color.

Example 3. Using text-overflow

HTML5 CSS3 IE Cr Op Sa Fx

The result of this example is shown in Fig. 3.

Figure: 3. Text with ellipsis

A big plus of these methods is the fact 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 displayed as usual when it is fully visible on the screen and clipped when the width of the element is reduced.

The introduction of CSS3 is revolutionizing the everyday life of web designers. CSS3 never ceases to amaze us every day. Things that previously could only be done with javascript are now easily done with CSS3. For example, the Text-Overflow property.

Sometimes in the process of creating sites, we need to hide some of the dynamic text without going to the next line. That is, insert long text into a fixed-width table. 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 with ellipsis (...).

With CSS3, we can do this easily using the CSS text-overflow property

Markup

Text-overflow: ellipsis;

Value ellipsis allows you to add an ellipsis (...) after the text

The text-overflow: ellipsis property is useful when:

1. The text goes outside the cell
2. The cell has free space: nowrap.

We have a div with a width of 150 pixels to display the company names from the database. But at the same time, we do not want long company names to jump to a new line and spoil the appearance of the table. That is, we need to hide the text that goes beyond 150 pixels. We also want to inform the user about this. So that he means that not all of the name is displayed. And we want all the text to be displayed on mouse hover.

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; )

Browser support

With support among browsers, this property has one little nuance. All except firefox render perfectly fine. But, luckily, there is a solution to this problem too!

Ellipsis in Firefox

Unfortunately, Firefox's gecko (rendering engine) does not support this property. However, this browser supports XBL, with which we will get out of this situation.

Gecko Is a free layout engine for browsers Mozilla Firefox, Netscape and others. The old names are "Raptor" and "NGLayout". Gecko's core concept is to support open Internet standards such as HTML, CSS, W3C DOM, XML 1.0, and JavaScript. Another concept is cross-platform. Gecko currently runs on Linux, Mac OS X, FreeBSD, and Microsoft Windows operating systems, as well as Solaris, HP-UX, AIX, Irix, OS / 2, OpenVMS, BeOS, Amiga, and more.

To display 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 location as the stylesheet. 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! \u003d val) this.style.display \u003d val

this.label.value
if (this.label.value! \u003d val) this.label.value \u003d val



var strings \u003d this.textContent.split (/ \\ s + / g)
if (! strings [0]) strings.shift ()
if (! strings [strings.length - 1]) strings.pop ()
this.value \u003d strings.join ("")
this.display \u003d 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 main web designer tool around the world for creating never-before-seen sites with a minimum of code. There are simple one-line solutions that were previously only possible with Photoshop or javascript. Start exploring the possibilities 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 :)

Endure with dignity what you cannot change.

How sometimes annoying are the long names of product links - three lines each - or long titles of other blocks. How great it would be if you could somehow constrain the whole thing, make it more compact. And when you hover the mouse, already show the title in full.

For this, our favorite CSS will come to our rescue. It's very simple, look.

Let's say we have such a block from the catalog with goods:

Here is its structure:

Miracle Yudo the power supply agent is evening, mysterious, art. 20255-59

A wonderful product at a super-price, only 100 rubles. Brighten up your lonely evenings and give a burst 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? None of this is an option, none of this suits us.

This is where CSS and its magic property come to our rescue. text-overflow... But it needs to be used properly 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 programmatic trimming of styles, we grab the CSS and see what we get:

Miracle Yudo the power supply agent is evening, mysterious, art. 20255-59

A wonderful product at a super-price, only 100 rubles. Brighten up your lonely evenings and give a burst of vitality!

Well, is it better? In my opinion, very much even! Hover your mouse over the title ... 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. 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;)

See what we've done:

• We added the property to the block white-space: nowrap, which removes from the text the ability to wrap words on a new line, thereby pulling it into a line;
• Then we added the property overflow: hidden, which limited the visibility of our line to the width of the block, thereby cutting off all unnecessary and not showing it to the visitor;
• Well, at the end, we added three dots to our line using the property text-overflow: ellipsis, thereby 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 site building will not seem so difficult to you \u003d)