单行文本超出隐藏
css样式中必须同时设置:
white-space: nowrap; //不换行
text-overflow: ellipsis;
overflow: hidden;
<h3>单行文本超出隐藏</h3>
<div class="single">
This is a sad story. Tell me your name and address.
</div>
.single{
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid black;
}
演示:
多行文本超出隐藏
这里以3行为例做演示:
css样式中必须同时设置:
display: -webkit-box;
-webkit-line-clamp: 3; //设置显示3行
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
<h3>多行文本超出隐藏</h3>
<div class="multiple">
This is a sad story. Tell me your name and address.
This is a sad story. Tell me your name and address.
This is a sad story. Tell me your name and address.
</div>
.multiple{
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
width: 300px;
height: 90px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid black;
line-height: 30px;
padding: 0 10px;
}
演示: