css溢出隐藏显示省略号

作者：涅盘の梦发布日期:2026-06-27 浏览:120

/* 示例代码：CSS溢出隐藏显示省略号 */

.text-ellipsis {
  white-space: nowrap; /* 强制文本在一行内显示，不换行 */
  overflow: hidden;    /* 超出容器部分隐藏 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
  width: 200px;        /* 设置一个固定宽度 */
}

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

解释说明：

white-space: nowrap;：确保文本不会换行，所有内容都在同一行内显示。
overflow: hidden;：当文本超出容器的宽度时，超出的部分会被隐藏。
text-overflow: ellipsis;：当文本被截断时，在结尾处显示省略号（...）。
width: 200px;：为容器设置一个固定的宽度，以便测试文本溢出的效果。

上一篇：transition在css中的用法

下一篇：css 文字间距