css超出隐藏显示省略号

作者：一小我的小情歌发布日期:2025-04-14 浏览:51

/* 示例代码：当文本超出容器宽度时，显示省略号 */

.text-ellipsis {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden;    /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
  width: 200px;        /* 设置容器宽度 */
}

解释说明：

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

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

上一篇：css 文字间距

下一篇：css 字体