css设置当字数超过限制后以省略号(...)显示
在CSS中,可以使用text-overflow
属性来实现当文本超过其容器的宽度时,以省略号显示文本的效果。同时,需要设置white-space
属性为nowrap
以及overflow
属性为hidden
。
以下是实现这一效果的CSS代码示例:
.ellipsis {
white-space: nowrap; /* 确保文本在一行内显示 */
overflow: hidden; /* 隐藏超出容器的文本 */
text-overflow: ellipsis; /* 使用省略号显示被截断的文本 */
}
接下来,你需要将这个类应用到你的HTML元素上。例如:
<div class="ellipsis">
这是一段很长的文本,当超出容器的宽度时,将以省略号显示超出的部分。
</div>
在这个例子中,如果<div>
的宽度小于文本的宽度,文本将会在末尾显示省略号,表示文本被截断了。
评论已关闭