CSS 文字超出变为省略号
在CSS中,可以使用text-overflow
属性来实现当文字超出容器宽度时显示为省略号。同时,需要设置white-space
属性为nowrap
来保证文本在一行内显示,以及overflow
属性为hidden
来隐藏超出容器的文本。
下面是实现这个效果的CSS代码示例:
.ellipsis {
white-space: nowrap; /* 保证文本在一行内显示 */
overflow: hidden; /* 隐藏超出容器的文本 */
text-overflow: ellipsis; /* 超出部分显示为省略号 */
width: 200px; /* 定义容器宽度 */
}
接下来是HTML代码示例:
<div class="ellipsis">
这是一段很长的文本,需要超出部分显示为省略号。
</div>
当这段文本在浏览器中显示时,如果它的宽度超过了200px,那么超出的部分将会被省略号...
代替。
评论已关闭