文章内容
2023/12/27 22:47:28,作 者: 黄兵
css 实现超出宽度，文字加省略号
在CSS中，可以使用text-overflow属性来实现超出宽度时显示省略号。以下是一个简单的例子：
.overflow-example {
white-space: nowrap; /* 禁止文字换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 显示省略号 */
width: 200px; /* 设置容器宽度，根据需要调整 */
}在这个例子中，.overflow-example是包含文本的容器元素。white-space: nowrap;禁止文本换行，overflow: hidden;隐藏超出容器宽度的部分，text-overflow: ellipsis;设置显示省略号。你可以根据实际需要调整容器的宽度。
以下是一个HTML示例：
<div class="overflow-example">
这是一段超长的文本，如果超过容器宽度，将会显示省略号。
</div>
通过这样的设置，当文本内容超出容器宽度时，浏览器将显示省略号来表示文本被截断了。
评论列表