7-Step implementation of CSS multi-line text ellipsis display

Line-height:1.76em; " > Reasonable truncation of multiple text is not an easy thing, we usually use several methods to solve:

• Overflow:hidden to hide extra text directly

• Text-overflow:ellipsis only applies to single-line text processing

• A variety of more vulnerable JavaScript implementations. The reason for this is that the vulnerability of this implementation is due to the need to change the text length of time to get Reflow (relayout) after the layout information, such as width

The original writing time is the 2012.9.18 number, a more meaningful day. However, the author ignores an extended attribute-webkit-line-clamp provided by WebKit, which is not a property in the CSS specification. Using this property to implement the ellipsis display of multiline text needs to be matched with the other three properties: Display:-webkit-box,-webkit-box-orient, text-overflow:ellipsis;. Where-webkit-line-clamp sets the number of lines of text that the block element contains; display:-webkit-box sets the layout of the block elements as a stretched layout,-webkit-box-orient sets the layout direction of the scaling items; Text-overflow: ellipsis; Indicates that the part that exceeds the box is represented by an ellipsis.

However, the method to be introduced in this article is to use the attributes in the CSS specification, and combine the special implementation techniques to complete. This means that it is compatible in browsers that implement the CSS2.1 specification and will not be just a purely mobile domain, but is still possible in traditional PC browsers (which you know I'm referring to). All right, let's see it together.

CSS implementation of multi-line text overflow ellipsis display

We divide the implementation into 7 steps, the simplest of which is to truncate the text , and the hardest part is to have an element at the bottom right of its parent containing block overflow, and the element disappears when the parent element does not overflow. To avoid easy, let's start with a simpler place--when the parent contains the box compared to the hour, the child element is laid out to the lower-right corner of the parent inclusion box.

1st intro

In fact, this implementation takes full advantage of the basic rules of element floating. Here does not explain in detail the CSS2.1 specification in several situations, the reader does not understand the self-inspection. The implementation of this code is simple, that is, three child elements and the height and floating settings of the containing block:

<p class= "wrap" >  <p class= "prop" >1.prop<br>float:left</p>  <p class= "main" > 2.main<br>float:right<br>fairly short text</p>  <p class= "End" >3.end<br>float: right</p></p>.wrap {  width:400px; height:200px;    margin:20px 20px 50px;    border:5px solid #AAA;    line-height:25px; }.prop {    float:left;    width:100px; height:200px;     Background: #FAF; }.main {    float:right;    width:300px;     Background: #AFF; }.end {    float:right;    width:100px;    Background: #FFA; }

2CD Simulation Scenario

We create a child element to replace the ellipsis that will be displayed, and the element appears in the correct position when the text overflows. In the next implementation, we created a realend element and used the position of the last section of the end element floating to implement the positioning of the realend element.

<p class= "wrap" >  <p class= "prop" >   1.prop<br>   float:right</p>  <p class= "Main" >   2.main<br>   float:left<br>   fairly short text</p>  <p class= "End" >   <p class= "Realend" >     4.realend<br>     position:absolute</p>  3.end<br >float:right  </p></p>.end {    float:right; position:relative;    width:100px;    Background: #FFA; }.realend {    position:absolute;    width:100%;    Top: -50px;    left:300px;    Background: #FAA; font-size:13px; }

In this step, our main concern is the positioning of the realend element, based on the floating end element to set the offset, when the end element floats to the position of the second chapter of the first section (that is, below the prop element), at which point the realend element is exactly 50px above the end element, At the right-hand side of the 300px-100px=200px, which is the lower-right corner of the parent inclusion box wrap element, is exactly what we expect:

If the parent element does not overflow, then the Realend element appears on its right side

This is a simple solution, see section Seventh below for an illustrative example.

3rd optimized positioning model

In the second section, we set the relative positioning for the end element and set absolute positioning on the realend element. But we can do it in simpler code, which is to use relative positioning only. Students familiar with the positioning model should know that relative positioning elements still occupy the text stream while still setting offsets for the elements. This allows you to remove the end element and set relative positioning for the realend element only.

<p class= "wrap" >  <p class= "prop" >1.prop<br>float:right</p>  <p class= "main" > 2.main<br>float:left<br>fairly short text</p>  <p class= "Realend" >  3.realend<br >position:relative</p></p>.realend {    float:right;         position:relative;    width:100px;     Top: -50px; left:300px;    Background: #FAA; font-size:14px; }

Other properties do not change, the effect is the same.

4th Narrow prop Elements

At present, the prop element on the leftmost side is to let the realend element in the text overflow when it is directly below it, in the previous sections of the sample code for the visual demonstration, set the width of the prop element is 100px, so now in order to better simulate the actual effect, We narrowed the width of the prop element gradually.

<p class= "wrap" >  <p class= "prop" >1.prop<br>float:right</p>  <p class= "main" > 2.main<br>float:left<br>fairly short text</p>  <p class= "Realend" >  3.realend<br >position:relative</p></p>.prop {  float:left;  width:5px;   height:200px;   Background: #F0F; }.main {    float:right;    width:300px;     Margin-left: -5px;    Background: #AFF; }.realend {    float:right;         position:relative;    Top: -50px;         left:300px;    width:100px;         Margin-left: -100px;    padding-right:5px;    Background: #FAA; font-size:14px; }

For prop elements, reduce the width to 5px, the remaining properties are unchanged;

For the main element, set the MARGIN-LEFT:5PX, let the main element move left 5px, so that the main element in the width of the full full of the parent element;

For realend elements, the values of top, left, and width are not changed. and set Margin-left: -100px, padding-right:5px is to let the realend element of the box model to calculate the final width of 5px.

Boxwidth = childmarginleft + childborderleftwidth + childpaddingleft + childwidth + childpaddingleft + ChildBorderRightWid th + childmarginrightwidth;

Because the CSS specification specifies that the value of padding cannot be negative, only the set Margind-left is negative and equal to its width. The ultimate goal of this is to ensure that the realend element is positioned below the prop element to ensure accuracy in the case of text overflow:

5th continue optimization: Streaming layout + pseudo-elements

Currently, the relevant properties of the Realend element are still measured in px , and for better extensibility, % substitution can be used instead.

At the same time, prop elements and realend elements can be implemented using pseudo-elements to reduce the use of additional tags.

<p class= "ellipsis" >  <p>2.main<br>float:left<br>fairly short text  </p></ p>/* equivalent to the previous prop element */.ellipsis:before {     content: "";    Float:left;    width:5px; height:200px;     Background: #F0F; }/* equivalent to the previous main element */.ellipsis > *:first-child {    float:right;    width:100%;     Margin-left: -5px;    Background: #AFF; }/* equivalent to the previous Realend element */.ellipsis:after {    content: "Realend";    Float:right; position:relative;    Top: -25px; left:100%;    width:100px; Margin-left: -100px;    padding-right:5px;    Background: #FAA; font-size:14px; }

As in the previous section.

6th hidden

In the previous implementation, the Realend element appears on the right side of the parent element, as in the case where the text does not overflow. Solving this problem is simple and urgent to set up:

. ellipsis{  Overflow:hidden;}

can solve the problem.

7th accomplished

Now we are one step away from the end of the knot, that is, remove the background color of the elements and replace the text with "...". Finally, to optimize the experience, use gradients to hide the "..." overlay of the text and set some compatibility properties.

Here, I believe that the current concern is only the CSS code:

. ellipsis {Overflow:hidden;    height:200px;    line-height:25px;    margin:20px; border:5px solid #AAA;    }.ellipsis:before {content: "";    Float:left; width:5px; height:200px;    }.ellipsis > *:first-child {float:right;    width:100%; Margin-left: -5px;      }. Ellipsis:after {content: "\02026";    Box-sizing:content-box;    -webkit-box-sizing:content-box;    -moz-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%; /* 512x1 image, gradient for IE9. Transparent at 0%, White at 50%, White at 100%.*/background-image:url (Data:image/png;base64,ivborw0kggoaaaansu heugaaagaaaaabcamaaacfzezeaaaabgdbtueaalgpc/xhbqaaawbqtfrf//////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////////////////// aaaa//////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////////////////// Wdwrdwaaap90uk5tgsrjmzxhs30yrvdup3emow1yibnm9 +ggozxrbtprro94gxitwloox/vshda2yggl8+tdkuk8vfufmhsggaqwjnc9tk+rb5kmca8am0iwpwv6dwp9+fxuferm3yms0jdoysy8wr5ftldeowkabgej8ratg+ieidsn2nuqljq3ogbdumc3sbrmsvksvalzplydzpzpbjoqco2kdyeee36bdal8/ vghbfr2cvtydu8r7esu6rcz5ecc4+af3ilcjsjz1ivt0s/ Pms3lnck4x8u7wz7bv0g9rlthueq1tbjqr1otvqqnwqrdoqbhnmsbz5mxaprtcjgoc4t2eyiffh9as7qylgaaarljrefukm9jqk9fegs7vnrdi2 +f/nyb1z4fa5ukn4tbbely7fw0tatkp3jp7mj7vxzl+4yrdsyovx+jyz7mxxnsp/a0rn25jmclpp8umzrctzw77tnyk63tdprzxdmo+ 2zdd9mfe56y9z3lug96mcx02n/cw71jh6qmf8px/cw77zvvzb+bcj8d5vxhn/vxzh6d4uzf1rn+cc347j79q/zul25tprjmfg/ 5lvunzp8rixezz/mf+vu+vut+5nl5gpoeb/sd1dzbts03hbuvmv5juarymfk849nem7qnek6ihi8/      QN049HB35QGHIV0YZXUMDKXTYC3EBRGLCQVYXOJ1MUVC1NDLRZJYGBPCDHHIMO2FWYV+J3QAAOBSFKZYITWUAAAAAELFTKSUQMCC); Background:-webkit-gradient (linear, left top, right top, from (RGBA (255, 255, 255, 0)), to (white), Color-stop (50%,    White));               Background:-moz-linear-gradient (to right, RGBA (255, 255, 255, 0), white 50%, white);    Background:-o-linear-gradient (to right, RGBA (255, 255, 255, 0), white 50%, white); Background:-ms-linear-gradient (to right, RGBA (255, 255, 255, 0), white 50%, white); Background:linear-gradient (To-right, RGBA (255, 255, 255, 0), white 50%, white);}

Summary of compatibility

From the implementation details above, the technique we are using is purely a floating + positioning + box model width calculation in the CSS specification, and the only compatibility problem lies in the insignificant gradient implementation, so you can try it in most browsers.