大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。那么利用css如何实现多行省略号呢?利用-webkit-line-clamp属性(WebKit的CSS扩展属性-WebKit是私有属性)是可以实现的,但是只适用于webkit浏览器和移动端。另外可以利用伪类配合定位实现,这个兼容性好一些。
利用-webkit-line-clamp属性(WebKit的CSS扩展属性-WebKit是私有属性)
适用于webkit浏览器和移动端
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
利用伪类
/* styles for '...' */
.block-with-text {
/* hide text if it more than N lines */
overflow: hidden;
/* for set '...' in absolute position */
position: relative;
/* use this value to count block height */
line-height: 1.2em;
/* max-height = line-height (1.2) * lines max number (3) */
max-height: 3.6em;
/* fix problem when last visible word doesn't adjoin right side */
text-align: justify;
/* */
margin-right: -1em;
padding-right: 1em;
}
.block-with-text:before {
/* points in the end */
content: '...';
/* absolute position */
position: absolute;
/* set position to right bottom corner of block */
right: 0;
bottom: 0;
}
.block-with-text:after {
/* points in the end */
content: '';
/* absolute position */
position: absolute;
/* set position to right bottom corner of text */
right: 0;
width: 1em;
/* set width and height */
height: 1em;
margin-top: 0.2em;
background: white;
}
扩展阅读
黑科技:CSS定制多行省略
多行省略
Pure CSS for multiline truncation with ellipsis
Line Clampin’– Truncating Multiple Line Text