css 单行省略号

作者：呐爱淡了发布日期:2026-06-10 浏览:54

/* 单行省略号的实现 */
.ellipsis {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden;    /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
  width: 200px;        /* 设置一个固定宽度，以便观察效果 */
}

解释说明：

white-space: nowrap;：防止文本换行，确保文本在一行内显示。
overflow: hidden;：当文本超出容器宽度时，隐藏超出的部分。
text-overflow: ellipsis;：当文本被截断时，在末尾显示省略号（...）。
width: 200px;：设置一个固定的宽度，以便更好地观察省略号的效果。你可以根据实际需求调整这个值。

如果你需要应用到 HTML 中，可以这样写：

<div class="ellipsis">
  这是一段非常长的文本，将会被截断并显示省略号。
</div>

上一篇：css宽度自适应

下一篇：css active