Multiple lines of text overflow display ellipsis (...) Full Introduction Summary

1, "CSS3 How to implement beyond the specified text to show the ellipsis effect"

Original source: Http://blog.csdn.net/billfeller/article/details/40436491?utm_source=tuicool

Do not do the front end for a long time, today from the refactoring learned that CSS3 has been able to achieve a lot of the past must be through JS to achieve the effect, such as gradient, shadow, automatic truncation text display ellipsis and so powerful effect, and these features are increasingly mature, has been a large number of production environment. H5 really gradually mature, get the evil to fill up.

The following share implements the demo with the specified text out of the section with an ellipsis display:

<span class= "SC2" ><<a target=_blank target= "_blank" href= Style.html "style=" text-decoration:none; Color:rgb (43, 115, 183); Outline:none; " ><span class= "kw2" style= "Color:rgb" (0, 0, 0); Font-weight:bold; "
    >style</span></a>></span> Text1 {width:200px;
    Overflow:hidden;
    Text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    -webkit-text-overflow:ellipsis;
    -moz-text-overflow:ellipsis;
White-space:nowrap;
    }. text2 {width:200px;
    Word-break:break-all;
    Display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
Overflow:hidden; } <span class= "SC2" ><<span class= "sy0" style= "Color:rgb" (102, 204, 102); " >/</span><a target=_blank target= "_blank href=" http://december.com/html/4/element/style.html "style=" Text-decoration:none; Color:rgb (43, 115, 183); Outline:none; " ><span class= "kw2" style= "Color:rgb" (0, 0, 0); Font-weight:bolD; " >style</span></a>></span>   <span class= "SC2" ><<a Target=_blank target= "_ Blank "href=" http://december.com/html/4/element/div.html "style=" text-decoration:none; Color:rgb (43, 115, 183); Outline:none; " ><span class= "kw2" style= "Color:rgb" (0, 0, 0); Font-weight:bold; " >div</span></a> <span class= "kw3" style= "Color:rgb (0, 0, 102);" >class</span><span class= "sy0" style= "Color:rgb (102, 204, 102);" >=</span><span class= "st0" style= "Color:rgb (255, 0, 0);" > "Text1" </span>></span> Hot selection: From the sub-channel (Apparel shoe bag, parent-child, home, Beauty) in the selection of the schedule, inventory is greater than 30% of the high letter price than the list of goods, the number of 50 <span class= "SC2" ><<span class= "sy0" style= "Color:rgb" (102, 204, 102); " >/</span><a target=_blank target= "_blank href=" http://december.com/html/4/element/div.html "style=" Text-decoration:none; Color:rgb (43, 115, 183); Outline:none; " ><span class= "kw2" style= "Color:rgb" (0, 0, 0); Font-weight:bold; " >div</span></a>></span>   <span class= "SC2" ><<a target=_blank target= "_blank" href= "http://" December.com/html/4/element/br.html "style=" text-decoration:none; Color:rgb (43, 115, 183); Outline:none; " ><span class= "kw2" style= "Color:rgb" (0, 0, 0); Font-weight:bold; " >br</span></a> <span class= "sy0" style= "Color:rgb (102, 204, 102);" >/</span>></span>   <span class= "SC2" ><<a target=_blank target= "_blank" Http://december.com/html/4/element/div.html "style=" text-decoration:none; Color:rgb (43, 115, 183); Outline:none; " ><span class= "kw2" style= "Color:rgb" (0, 0, 0); Font-weight:bold; " >div</span></a> <span class= "kw3" style= "Color:rgb (0, 0, 102);" >class</span><span class= "sy0" style= "Color:rgb (102, 204, 102);" >=</span><span class= "st0" style= "Color:rgb (255, 0, 0);" > "Text2" </span>></span> Hot selection: From the sub-channel (Apparel shoe bag, parent-child, home, Beauty) in the selection of the schedule, inventory is greater than 30% of the high letter price than the product list, the number of 50A <span class= "SC2" ><<span class= "sy0" style= "Color:rgb" (102, 204, 102); " >/</span><a target=_blank target= "_blank href=" http://december.com/html/4/element/div.html "style=" Text-decoration:none; Color:rgb (43, 115, 183); Outline:none; " ><span class= "kw2" style= "Color:rgb" (0, 0, 0); Font-weight:bold; " >div</span></a>></span>

The following figure:

2.multiple lines of text overflow display ellipsis (...) All Raiders "

Original source: http://www.css88.com/archives/5206

You should all know that using the Text-overflow:ellipsis property to implement a single line of text overflow displays ellipses (...). Of course, some browsers also need to add width widths properties.

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

However, this property does not support multiple lines of text overflow display ellipsis, here, according to the application scenario to introduce several methods to achieve this effect. WebKit Browser or mobile-side pages

In the WebKit browser or mobile end (most of the WebKit kernel browser) the page implementation is relatively simple, you can directly use the WebKit CSS Extended properties (WebKit is private)-webkit-line-clamp; Note: This is a nonstandard attribute (unsupported WebKit property), it does not appear in the CSS specification draft.

-webkit-line-clamp is used to limit the number of lines of text displayed in a single block element. To achieve this effect, it needs to combine other WebKit properties.
Common binding attributes: Display:-webkit-box; The properties must be combined to display the object as an elastic telescopic box model. -webkit-box-orient must combine attributes to set or retrieve the arrangement of child elements of a telescopic box object. Text-overflow:ellipsis, which can be used for multiple lines of text, use ellipsis "..." to hide text that goes out of range.

Overflow:hidden; Text-overflow:ellipsis; Display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;

This property is appropriate for WebKit browsers or mobile terminals (mostly WebKit) browsers.

Specific examples can be viewed http://www.css88.com/webkit/-webkit-line-clamp/ cross-browser compatible Scenarios

A relatively straightforward approach is to set the relative positioning of the container height, with the containing ellipsis (...) the element simulation realization;

For example:

p {position:relative; line-height:1.4em/* 3 times of the Line-height to show 3 lines * * HEIGHT:4.2EM; overflow:hidden;} p :: After {content: "..."; Font