CSS 文字超出变为省略号
warning:
这篇文章距离上次修改已过451天，其中的内容可能已经有所变动。
在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，那么超出的部分将会被省略号...代替。
评论已关闭