css省略号表示溢出文本

作者：孤独的角落发布日期:2025-06-16 浏览:24

/* 设置元素的宽度和溢出文本显示为省略号 */
.ellipsis {
  width: 200px; /* 设置元素的固定宽度 */
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 溢出的文本显示为省略号 */
}

解释说明：

width: 200px;：设置元素的宽度为200像素，确保文本在特定宽度内显示。
white-space: nowrap;：防止文本自动换行，使得文本在一行内显示。
overflow: hidden;：当文本超出容器宽度时，隐藏溢出的部分。
text-overflow: ellipsis;：当文本溢出时，在容器末尾显示省略号（...）。

这样可以确保当文本内容超出指定宽度时，会以省略号的形式展示，而不是直接被截断或换行。

上一篇：css字体间距

下一篇：css伪类选择器