CSS text overflow hidden display ellipsis (single row + multiline)

Text more than a few lines on line, this feature almost every text browsing site will be used, the way to achieve it is also a lot, today simply introduce the way to implement it.

one-line text does not wrap, and the text is hidden beyond

.box-content{

    overflow: hidden;//文本溢出隐藏

    text-overflow: ellipsis;//文本溢出显示省略号

    white-space: nowarp;//不换行

}

Two. Implement multiple lines of text hiding in the WebKit kernel browser and display ellipses

In the WebKit kernel, you can take advantage of the-webkit-line-clamp property, whose value is a number (1, 2, 3 ...), but it is not a CSS standard, only implemented in WebKit, must be for block-level elements,

and set the display property of the element to:-webkit-box,

And the-webkit-box-orient property is set to: vertical, as follows:

.box-content{           display: -webkit-box; //将元素设为盒子伸缩模型显示      -webkit-box-orient: vertical; //伸缩方向设为垂直方向      -webkit-line-clamp: 3 ;  //超出3行隐藏，并显示省略号Overflow:hidden; }

Because it is WebKit kernel browser implementation, for other browsers are not compatible, so in order to be compatible with more browsers, can be implemented as follows.

three. Ways to be compatible with all browsers

This method is implemented by using the pseudo-selector of CSS, setting the element location to relative, setting the pseudo selector to absolute, and adjusting the position of the pseudo selector. As follows:

Two-line overflow omitted

p {
position:relative;
line-height:20px;
max-height:40px;
Overflow:hidden;
width:60px;
}

P::after {
Display:block;
content: "...";
Position:absolute;
bottom:0;
right:0;
padding-left:40px;
}

tip: To set the number of rows to display, you only need to set height to an integer multiple of line-height.

Because IE6-7 does not display content, it is necessary to add a label compatible with ie6-7 (such as:<span>...<span/>); compatible IE8 needs to be replaced by: after.

CSS text overflow hidden display ellipsis (single row + multiline)