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样式的值决定。
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://gujunling.github.io/pages/a7fa46/ (opens new window)
← 「布局技巧」图片未加载前自动撑开元素高度 从box-sizing属性入手，了解盒子模型→
文字在一行或两行时超出显示省略号