文字在一行或两行时超出显示省略号
完善页面 (opens new window)
上次更新: 2021-12-20 11:13:00
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
<html>
<div class="test1">一行文本超出显示省略号一行文本超出显示省略号一行文本超出显示省略号一行文本超出显示省略号一行文本超出显示省略号一行文本超出显示省略号一行文本超出显示省略号一行文本超出显示省略号一行文本超出显示省略号一行文本超出显示省略号一行文本超出显示省略号一行文本超出显示省略号一行文本超出显示省略号</div>
</html>
<style>
.test1{
border: 1px solid #999;
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
显示的行数由line-clamp
样式的值决定。
<html>
<div class="test2">两行(多行)超出显示省略号两行(多行)超出显示省略号两行(多行)超出显示省略号两行(多行)超出显示省略号两行(多行)超出显示省略号两行(多行)超出显示省略号两行(多行)超出显示省略号两行(多行)超出显示省略号</div>
</html>
<style>
.test2{
border: 1px solid #999;
width: 200px;
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
可参考链接:https://sweetheartjq.cn/pages/a7fa46/ (opens new window)
粤公网安备 44040202001285号 | 豫ICP备2021003461号-2