Defines the visibility of the text in the block if the entire text does not fit in the specified area. There are two options: the text is cut off; the text is truncated and an ellipsis is added to the end of the line. text-overflow works when the block's overflow property is set to auto , scroll , or hidden .

short information

Notation

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 a large circle of the celestial sphere, in which case the eccentricities and inclinations of the orbits increase.

Result this example shown in fig. one.

Rice. 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 (Recommendation) - the specification is approved by the W3C and recommended as a standard.
• Candidate Recommendation ( Possible recommendation) - the group responsible for the standard is satisfied that it meets its goals, but the support of the development community is required to implement the standard.
• Proposed Recommendation ( Suggested recommendation) - at this stage, the document is submitted to the W3C Advisory Board for final approval.
• Working Draft - A more mature draft after discussion and amendments for community review.
• Editor's draft ( Editorial draft) is a draft version of the standard after changes have been made by the project editors.
• draft ( Specification draft) is the first draft version of the standard.

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 the CSS text-overflow property.

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 new line and spoiled 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; )

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 the help of 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. Gecko currently 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 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.

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 web designer's premier tool around the world to create never-before-seen websites with minimal code. There are simple, literally 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.

There is text of arbitrary length that needs to be displayed inside a block of fixed height and width. In this case, if the text does not fit completely, a text fragment should be displayed that fits completely into the specified block, after which the ellipsis is set.

Such a task is quite common, at the same time, it is not as trivial as it seems.

Variant for single line text in CSS

In this case, you can use the text-overflow: ellipsis property. In this case, the container must have the property overflow equal hidden or clip

Block ( width : 250px ; white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; )

Variant for multiline text in CSS

The first way to trim multiline text with using CSS properties apply pseudo-elements :before and :after. Let's get started with the HTML markup

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

And now the properties themselves

Box ( overflow : hidden ; height : 200px ; width : 300px ; line-height : 25px ; ) .box :before ( content : "" ; float : left ; width : 5px ; height : 200px ; ) .box > * :first -child ( float : right ; width : 100% ; margin-left : -5px ; ) .box :after ( content : "\02026" ; box-sizing : content-box ; float : right ; position : relative ; top : -25px ; left : 100% ; width : 3em ; margin-left : -3em ; padding-right : 5px ; text-align : right ; background-size : 100% 100% ; background : linear-gradient (to right , rgba (255 , 255 , 255 , 0 ), white 50% , white ); )

Another way is to use the column-width property, which sets the column width for multiline text. True, when using this method, it will not work to install an ellipsis at the end. HTML:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Block ( overflow : hidden ; height : 200px ; width : 300px ; )

The third way to solve multiline text in CSS is for browsers Webkit. In it, we will have to use several specific properties at once with the prefix -webkit. The main one is -webkit-line-clamp which allows you to specify the number of lines to display in the block. The solution is beautiful but rather limited due to its work in a limited group of browsers

Block ( overflow : hidden ; text-overflow : ellipsis ; display : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : vertical ; )

Variant for multiline text in JavaScript

An additional invisible block is used here, in which our text is initially placed, after which it is deleted one character at a time until the height of this block becomes less than or equal to the height desired block. And at the end the text is moved to the original block.

var block = document . querySelector(".block" ), text = block . innerHTML , clone = document . createElement("div"); clone. style. position = "absolute" ; clone. style. visibility = "hidden" ; clone. style. width = block . clientWidth + "px" ; clone. innerHTML = text ; document. body . appendChild(clone); var l = text . length - 1 ; for (; l >= 0 && clone . clientHeight > block . clientHeight ; -- l ) ( clone . innerHTML = text . substring (0 , l ) + "..." ; ) block . innerHTML = clone . innerHTML ;

This is in the form of a plugin for jQuery:

(function ($) ( var truncate = function (el ) ( var text = el . text (), height = el . height (), clone = el . clone (); clone . css (( position : "absolute" , visibility : "hidden" , height : "auto" )); el .after (clone ); var l = text . length - 1 ; for (; l >= 0 && clone . height () > height ; -- l ) ( clone . text (text . substring (0 , l ) + "..." ); ) el . text (clone . text ()); clone . remove (); ); $ . fn . truncateText = function () ( return this . each (function () ( truncate ($ (this )); )); ); )(jQuery ));

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 long lines 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

The result of this example is 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 the browser Internet 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 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 unconscious causes contrast, this is labeled by Lee Ross as a fundamental attribution error that can be traced in many experiments.

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

Rice. 3. Text with ellipsis

The 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 rendered as normal when it is fully visible on the screen, and clipped when the element's width is reduced.