css 省略号

作者：余烬已熄发布日期:2025-03-02 浏览:85

/* 示例代码：使用 CSS 实现文本溢出时显示省略号 */

.ellipsis {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden;    /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 溢出部分用省略号表示 */
  width: 200px;        /* 设置一个固定的宽度 */
}

解释说明：

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

这样，当文本内容超过容器的宽度时，超出的部分会被隐藏，并用省略号代替。

上一篇：css display

下一篇：css换行