CSS中超出自动换行并省略多余内容

是指,当文本内容超出指定的宽度范围时,CSS会自动将文本换行,并将多余的内容用省略号“…”来表示。

使用方法

要实现的效果,需要在CSS样式表中添加以下代码:

.overflow-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

其中,white-space属性指定不换行;overflow属性指定超出范围的内容被隐藏;text-overflow属性指定超出范围的内容用省略号“…”来表示。

在HTML文档中,要使用该样式,可以在标签中添加class属性,如:

<div class="overflow-ellipsis">这是一段文本,当它超出指定的宽度范围时,会自动换行并省略多余的内容</div>

这样,当该文本内容超出指定的宽度范围时,CSS会自动将文本换行,并将多余的内容用省略号“…”来表示。


本文链接:http://task.lmcjl.com/news/12885.html

展开阅读全文