css超出部分显示省略号

作者：朕不想活了发布日期:2025-12-25 浏览:98

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

.text-ellipsis {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden;    /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
  width: 200px;        /* 设置一个固定的宽度，可以根据需要调整 */
}

解释说明：

white-space: nowrap;：防止文本自动换行，确保所有文本都在同一行内显示。
overflow: hidden;：当文本内容超出容器的宽度时，超出的部分会被隐藏。
text-overflow: ellipsis;：当文本被截断时，在末尾显示省略号（...）来表示有更多内容。
width: 200px;：设置容器的固定宽度，确保文本不会无限制地扩展。你可以根据实际需求调整这个值。

将上述CSS类应用到HTML元素上，即可实现超出部分显示省略号的效果。

上一篇：css important

下一篇：css超出隐藏显示省略号