css单行文本溢出省略号

作者：▄对对碰发布日期:2025-07-21 浏览:5

/* 单行文本溢出省略号的CSS代码 */

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

解释说明：

white-space: nowrap;：防止文本换行，确保所有文本都在同一行显示。
overflow: hidden;：隐藏超出容器宽度的内容。
text-overflow: ellipsis;：当文本溢出时，使用省略号（...）来代替溢出的部分。
width: 200px;：设置一个固定的宽度，确保文本在一个有限的空间内显示。你可以根据实际需求调整这个宽度。

将上述样式应用到你的HTML元素上，即可实现单行文本溢出时显示省略号的效果。

上一篇：css字体颜色

下一篇：css 上下居中