场景: 文章标题或其他内容过长时,截断为省略号显示。
单行文本省略
.box {
/* 溢出显示省略号 */
max-width: 40vw;
overflow: hidden; // 关键
text-overflow: ellipsis; // 关键
white-space: nowrap; // 关键
}
最终效果:
20201211更新:多行文本省略
仅webkit
浏览器支持
.box {
width: 400px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}