CSS implementation single-line and multiline text ellipsis (truncation)

In the previous article the small div layout card stack (card-stacking) has multiple lines of text overflow ellipsis effect, this article on the effect (including single-line text overflow omitted) Implementation of a simple record, in case you forget. Specifically, it is to achieve this text arrangement effect.

The HTML code is as follows:

1 <Divclass= "Container">2   <Divclass= "box">3     <Divclass= "Box-content">4       <h5class= "Box-content-title">Company A</h5>5       <Divclass= "Box-content-desc singleline">Company A is an important strategic partner of B Company, is committed to providing a one-stop solution for the C industry, and is currently in a high-speed development period. The company has four business departments, the business mainly covers the following three aspects, the company's annual turnover reached 1 million yuan in 2016. 6       </Div>7       <Divclass= "Box-content-desc Multiline">Company A is an important strategic partner of B Company, is committed to providing a one-stop solution for the C industry, and is currently in a high-speed development period. The company has four business departments, the business mainly covers the following three aspects, the company's annual turnover reached 1 million yuan in 2016. 8       </Div>9       <aclass= "Box-content-link"href= "javascript:void (0);">View >></a>Ten     </Div> One   </Div> A </Div>

The common CSS styles are as follows:

1 . Container {2 margin:50px Auto;3 width:328px;4 }5 6 . Box {7 background: #f7f7f7;8 }9 Ten . box-content { One padding:20px; A } -  - . box-content-title { the margin:0 0 20px; - } -  - . Box-content-desc { + color: #333; - font-size:14px; + line-height:1.5; A margin-bottom:10px; at Overflow:hidden; - } -  - . Box-content-link { - color: #006ec8; - font-size:14px; in Text-decoration:none; -}

Pay attention to the above Overflow:hidden;

Single-line text overflow omitted:

1 . singleline{2  text-overflow:ellipsis; 3   White-space:nowrap; 4 }

The Text-overflow property specifies how to display the overflow text content, its property value can be elipsis (...), clip (truncate), custom string, I tried in chrome, I found the custom string is not good.

Again see multiline text overflow omitted:

1 . Multiline {2  display:-webkit-box; 3   text-overflow:ellipsis;; 4   -webkit-box-orient:vertical; 5   -webkit-line-clamp:4; 6 }

You can see the use of the nonstandard CSS notation, that is, the wording with the WebKit prefix (webkit kernel browser private property), there is a number of outdated wording,

Display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;

There is not much to explain (in fact, the explanation does not understand), multi-line ellipsis method is not very good. Let's look at other better ways later.

PS: Just see this article multi-line text overflow display ellipsis (...) All raiders, said the next more reliable method. Sweat, this is the professional front-end ~

Reference:

Text-overflow

Box-orient

Line-clamp

CSS implementation single-line and multiline text ellipsis (truncation)