css单行省略号

作者：／神經病／发布日期:2025-08-22 浏览:45

/* 设置单行文本溢出时显示省略号 */
.ellipsis {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 溢出部分显示为省略号 */
  width: 200px; /* 设置一个固定宽度，以便观察效果 */
}

解释说明：

white-space: nowrap;：禁止文本自动换行，确保文本在一行内显示。
overflow: hidden;：当文本超出容器的宽度时，隐藏超出的部分。
text-overflow: ellipsis;：当文本溢出时，在容器的末尾显示省略号（...）。
width: 200px;：设置一个固定的宽度，以便观察省略号的效果。你可以根据实际需求调整这个值。

上一篇：css 禁用滚动条

下一篇：css图片平铺