css多行文字超出显示点点点...-webkit-line-clamp详解
js控制多行文字超出显示点点点“...”
一行文字超出显示点点点“...”,非常简单:
.line{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }注意:上面这段代码要想起作用,前提是.line这个容器必须有宽度,如果是flex-item,也必须固定宽度,如:
.line{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:500px; flex-shrink:0; //必须加上,否则宽度没作用。 }多行文字超出显示点点点“...”(当然,也适用于一行):
.line2{ -webkit-line-clamp: 2; //这里就是行数,想限制多少行就写多少 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; }