一、text-overflow使用情况:
- 指定当文本溢出包含它的元素。
text-overflow的三个有效属性:
属性值 | 使用效果 |
---|---|
clip | 修剪文本,超出部分截断 |
ellipsis | 显示省略符号(…)来代表被修剪的文本 |
string | 使用给定的字符串来代表被修剪的文本 |
二、单行文本溢满:
当目标文本超过预期定义的长度时,超出的内容可以通过text-overflow
来进行直接修剪、使用…代替、使用自定义字符来显示。
示例:
.nameOverflow {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; /* 让超过预计宽度的元素使用...代替 */
display: inline-block;
vertical-align: middle;
width: 350px;
}
三、多行文本溢满:
当多行文本的最后一行文本溢出需要多做处理时,同样可以使用text-overflow
,但需要追加一个CSS样式-webkit-line-clamp: N
,但要求尽量使用最新版的Chrome浏览器。
.nameOverflow {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; /* 让超过预计宽度的元素使用...代替 */
-webkit-line-clamp: N; /* 控制显示的行数 */
-webkit-box-orient: vertical;
display: inline-block;
vertical-align: middle;
width: 350px;
}
四、JavaScrpit使用语法:
object.style.textOverflow="ellipsis"