下面和css可以让超出div的文字用省略号代替,但是只能显示一行文字,可以显示2行文字后再省略吗?
.line1 {
height: 200px;
width:200px;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
}
可以看一下
http://zhidao.baidu.com/quest...
也可以用伪元素after实现吧
搜搜-webkit-line-clamp
这个属性,除了这个兼容性不好的属性,只有动js了
CSS无法完成,你需要jquery插件,dotdotdot
-webkit-line-clamp
div {
padding: 8px 12px;
height: 72px;width: 512px;
font-size: 24px;line-height: 36px;color: #fff;
background: #ef6c00;
overflow: hidden;
position: relative;
}
div:after {
width: 24px;height: 36px; /* 符合 font-size 和 line-height */
background: inherit;
display: block;
position: absolute;bottom: 8px;right: 12px; /* right 值根据 padding 等因素慢慢试 */
content: "…";
}
<div>蓝蓝的天空,清清的湖水。这是一些文字。这是一些文字。这是一些文字。这是一些文字。这是一些文字。</div>
https://jsfiddle.net/kz_dsf/z...
有个缺点是文字中最好别有多种文字。
.box {
width: 400px;
overflow: hidden;
-webkit-line-clamp: 3; //行数
-webkit-box-orient: vertical;
}
仅支持webkit
浏览器,可用于移动端