CSS implements single-line and multi-line text omitting (truncation), csstruncation

CSS implements single-line and multi-line text omitting (truncation), csstruncation

In the previous article, card-stacking, a small div layout, has the effect of multi-line text overflow and omission. This article is about this effect (including single-line text overflow and omission) to make a simple record, in case you forget. Specifically, this text layout effect must be achieved.

The html code is as follows:

1 <div class = "container"> 2 <div class = "box"> 3 <div class = "box-content"> 4 

The general css style is as follows:
 1 .container { 2   margin: 50px auto; 3   width: 328px; 4 } 5  6 .box { 7   background: #f7f7f7; 8 } 9 10 .box-content {11   padding: 20px;12 }13 14 .box-content-title {15   margin: 0 0 20px;16 }17 18 .box-content-desc {19   color: #333;20   font-size: 14px;21   line-height: 1.5;22   margin-bottom: 10px;23   overflow: hidden;24 }25 26 .box-content-link {27   color: #006ec8;28   font-size: 14px;29   text-decoration: none;30 }
Note that the above overflow: hidden; should be retained.
Single Line Text overflow omitted:
1 .singleline{2   text-overflow: ellipsis;3   white-space: nowrap;4 }
The text-overflow attribute specifies how overflow text content is displayed. The attribute value can be elipsis (...) clip (truncation), custom string, I tried in chrome and found that the custom string is not easy to use.
Check whether multiple lines of text overflow are omitted:
1 .multiline {2   display: -webkit-box;3   text-overflow: ellipsis;;4   -webkit-box-orient: vertical;5   -webkit-line-clamp: 4;6 }
We can see that the nonstandard css style is used here, that is, the style with the webkit prefix (the private attribute of the webkit kernel browser), and some outdated methods are used,
display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;
There is not much explanation here (in fact, the explanation is not clear). It is not good to omit multiple lines. Study other good methods later.
 
Ps: The ellipsis (…) is displayed when multiple lines of text overflow appear in this article (...) The full introduction introduces more reliable methods. Khan, This is the front-end of professional services ~
 
Refer:
Text-overflow
Box-orient
Line-clamp