本文已整理到 Github,地址 👉 blog。
如果我的内容帮助到了您,欢迎点个 Star
🎉🎉🎉 鼓励鼓励 :) ~~
我希望我的内容可以帮助你。现在我专注于前端领域,但我也将分享我在有限的时间内看到和感受到的东西。
单行文本溢出
以下是截断单行长文本的 CSS 片段:
.truncate {
width: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
-
overflow: hidden
— 文字长度超出限定宽度,则隐藏超出的内容 -
text-overflow: ellipsis
— 规定当文本溢出时,显示省略符号来代表被修剪的文本 -
white-space: nowrap
— 设置文字在一行显示,不能换行
多行文本溢出
使用 -webkit-line-clamp
可以设置多行超出显示省略号,下面的 CSS 声明将行数限制为 2:
.truncate {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
注意:
-webkit-line-clamp
属性仅在具有display: -webkit-box
和-webkit-box-orient: vertical
声明时有效。
更多资料
Line Clampin (Truncating Multiple Line Text) 给出了更多灵活的文本溢出方案。
网友评论