css溢出显示省略号

作者：让固执流亡丶发布日期:2026-06-03 浏览:54

/* 以下是一个简单的 CSS 示例，用于在文本溢出时显示省略号 */

.ellipsis {
  /* 设置元素的宽度 */
  width: 200px;

  /* 隐藏溢出的内容 */
  overflow: hidden;

  /* 文本不允许换行 */
  white-space: nowrap;

  /* 溢出部分用省略号表示 */
  text-overflow: ellipsis;
}

解释说明：

width: 200px;：设置元素的固定宽度，确保文本不会无限扩展。
overflow: hidden;：当文本内容超出容器的宽度时，隐藏超出的部分。
white-space: nowrap;：防止文本自动换行，确保文本在一行内显示。
text-overflow: ellipsis;：当文本溢出时，使用省略号（...）来代替溢出的部分。

你可以将这个类应用到任何 HTML 元素上，例如：

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

上一篇：css基础选择器有哪些

下一篇：css透明背景