css 文字超出隐藏

作者：°妮可罗宾发布日期:2026-03-20 浏览:83

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

解释说明：

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

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

上一篇：css odd

下一篇：css内容超出显示滚动条