Sample code sharing for Text-overflow attributes and text truncation in CSS

This article mainly introduces the CSS in the Text-overflow attribute and text truncation of the relevant data, the text gives a detailed sample code for everyone to refer to the study, I hope the content of this article to you front-end developers can bring certain help, the need for friends to follow the small series together to learn it.

Objective

This article is mainly about the CSS in the Text-overflow attribute and text truncation of the relevant content, shared out for everyone to refer to the study, the following to see the detailed introduction:

Text-overflow and text truncation

Csser is certainly very familiar with Text-overflow, and, for a single line of text truncation, contains the text-overflow:ellipsis, the 3 lines of code, may also be our most customary.

text-overflow:ellipsis;  Overflow:hidden;  White-space:nowrap;

This small section of CSS even compatible to IE6, after all, text-overflow:ellipsis, originally is IE's exclusive, so early text truncation of the struggle is mainly in Firefox, until Firefox7.0, we just put aside for the FF trick and focus on the use of this code. Of course, multi-line truncation or not, in some cross-browser compatibility requirements, the front end once needed to help truncate the content.

While there is no other way to implement multiline text truncation, it is not possible to take care of all of it in the browser form at that time. For example, you can now use pseudo-elements: after positioning at the end of multiple lines and applying a gradient transition to simulate truncation.

. clamp{  height:3.6em;  Line-height:1.2em;  Overflow:hidden;  Position:relative;}. clamp:after{  content: "...";  Position:absolute;  right:0;  bottom:0;  Background:linear-gradient (To-right, RGBA (255, 255, 255, 0), #FFFFFF 50%) Repeat scroll 0 0 rgba (0, 0, 0, 0);}

The use of gradients makes truncation look less blunt, but I haven't used it on a practical occasion at all: because there are a lot of drawbacks to this approach, and I've always disliked the way it looks ugly. Unless forced to hurry, or I always say to others seriously: "My concubine Can't Do" ~

If it is only webkit, the usual practice is to-webkit-line-clamp, for the current WebKit dominated by the mobile phone is a better way, the effect is what we expect:

Display:-webkit-box;  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;

For many years (>5), this code is still working well, but now look back,-webkit-box is the old flex syntax, although now and the new Flex grammar coexist, but the day will not be. But even so, there is no better way, there is no substitute for-webkit-line-clamp properties, the old and new grammar can not be mixed, we have to continue to obediently use the "classic" code.

Another small problem with-webkit-line-clamp is that there is a flaw in support for Chinese. Compared to the perfect effect in English, when using Chinese, as the width of the container changes, the truncation of the three points "..." will often be convulsions, only show 2 points or even 1 points, hope that the newer version of the browser can solve this small problem.

In the case of text truncation, we are always accustomed to the default of three points, in fact, in addition to the above mentioned pseudo-element simulation method, we can not change this form of expression. However, looking back to the Text-overflow this property, the new version of the standard will bring more possibilities.

CSS Basic User Interface Module Level 3 is currently the status of CR, Text-overflow only two values are selectable: clip or ellipsis, but to the level 4 in the draft, the attribute value becomes more:

[Clip | ellipsis | <string> | fade | <fade () >] {A}

We can specify the <string> text to replace the three points that are not changed during truncation, you can specify the transition and control its distance, and even provide two values to control the beginning and end of the line at the same time ... Although this does not seem to be any use of eggs, but Firefox incredibly early in 9.0 to support the first of the <string> value and double-value syntax! I wipe, is it the Firefox in Text-overflow after the people criticized, a step toward the latest in the pit to go to the ...

However, text-overflow or that text-overflow, is still a single line, still with old partner White-space:nowrap, or the familiar taste. Even though there may be some more fashionable features, there is still no way to conceal our lack of means for multi-line truncation.

Summarize