css文字超出显示省略号

作者：无法言喻发布日期:2025-08-23 浏览:57

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

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

解释说明：

white-space: nowrap;：防止文字在容器内换行，确保所有文字都在同一行显示。
overflow: hidden;：当文字超出容器的宽度时，超出的部分会被隐藏。
text-overflow: ellipsis;：当文字被隐藏时，在容器的末尾显示省略号（...）来表示有更多内容未显示。
width: 200px;：设置容器的宽度为200像素。你可以根据实际需求调整这个值。

上一篇：css 3

下一篇：css文字竖排