css不换行省略号

作者：冫LOVE灬丶棒棒发布日期:2026-02-10 浏览:100

.text-ellipsis {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden;    /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 溢出内容用省略号表示 */
  width: 200px;        /* 设置一个固定宽度，以便测试效果 */
}

解释说明：

white-space: nowrap;：防止文本在遇到容器边界时自动换行。
overflow: hidden;：隐藏超出容器部分的内容，避免溢出显示。
text-overflow: ellipsis;：当文本溢出时，使用省略号（...）来代替超出的部分。
width: 200px;：设置一个固定的宽度，以便观察省略号的效果。你可以根据实际需求调整这个值。

将上述样式应用到 HTML 元素上，例如：

<div class="text-ellipsis">
  这是一段非常长的文本，当它超出容器宽度时会自动显示省略号。
</div>

上一篇：css设置下划线

下一篇：css 半圆

css不换行 省略号

解释说明：

css不换行省略号