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.