overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
<html> <div class="box-42b6">演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字</div> </html> <style> .box-42b6{ 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="box2-42b6">演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字</div> </html> <style> .box2-42b6{ 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>
← 「布局技巧」图片未加载前自动撑开元素高度 从box-sizing属性入手，了解盒子模型→
文字在一行或两行时超出显示省略号
Amadeus's blog 文字在一行或两行时超出显示省略号