css 超出显示省略号

作者：末世修罗发布日期:2026-02-19 浏览:27

/* 设置元素的宽度，并使用省略号来处理溢出的内容 */
.ellipsis {
  width: 200px; /* 设置元素的宽度 */
  white-space: nowrap; /* 防止内容换行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 使用省略号表示被修剪的文本 */
}

解释说明：

width: 200px;：设置元素的固定宽度，确保当内容超出这个宽度时会触发省略号。
white-space: nowrap;：防止文本换行，确保所有内容都在一行内显示。
overflow: hidden;：隐藏超出容器宽度的内容，避免内容溢出。
text-overflow: ellipsis;：当内容超出容器宽度时，使用省略号（...）来表示被隐藏的部分。

这样设置后，当文本内容超出指定的宽度时，超出部分会被省略号替代。

上一篇：css小手