css 文字溢出显示省略号

作者：为你丶偶尔温柔一次发布日期:2026-05-29 浏览:87

/* 示例代码 */

.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;：设置一个固定的宽度，以便能够看到省略号的效果。

上一篇：css 字体阴影

下一篇：css 文字间隔