在CSS中,当文本内容长度超过某个指定宽度时,想要显示省略号(...)
在CSS中,可以使用text-overflow
属性来实现当文本内容超出指定宽度时显示省略号。同时,需要设置white-space
属性为nowrap
以防止文本自动换行,以及overflow
属性为hidden
以隐藏超出容器的文本。
下面是一个简单的例子:
.ellipsis {
width: 200px; /* 指定宽度 */
white-space: nowrap; /* 防止自动换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 使用省略号 */
}
<div class="ellipsis">
这是一段很长的文本内容,当超出指定宽度时,希望显示省略号。
</div>
在这个例子中,.ellipsis
类应用于一个div
元素,当内容超出200px宽度时,会在末尾显示省略号。
评论已关闭