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

This article makes a simple record of the implementation of this effect (including single-line text overflow ellipsis) in case you forget. Specifically, it is to achieve this text arrangement effect.

The HTML code is as follows:

<div class= "Container" >  <div class= "box" >    <div class= "box-content" >      

The common CSS styles are as follows:

. container {  margin:50px auto;  width:328px;}. box {  background: #f7f7f7;}. box-content {  padding:20px;}. Box-content-title {  margin:0 0 20px;}. Box-content-desc {  color: #333;  font-size:14px;  line-height:1.5;  margin-bottom:10px;  Overflow:hidden;}. Box-content-link {  color: #006ec8;  font-size:14px;  Text-decoration:none;}
Note the above Overflow:hidden; To be preserved.

Single-line text overflow omitted:

1singleline{

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:

. Multiline {  display:-webkit-box;  text-overflow:ellipsis;;  -webkit-box-orient:vertical;  -webkit-line-clamp:4;}
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.

