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>
← 「布局技巧」图片未加载前自动撑开元素高度 如何根据系统主题自动响应CSS深色模式→
文字在一行或两行时超出显示省略号