css 一行省略

作者：﹏〃对不起╮他是为你哭了发布日期:2026-02-06 浏览:100

.text-ellipsis {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
  width: 200px; /* 设置一个固定宽度，以便测试效果 */
}

解释说明：

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

这样，当文本内容超过指定宽度时，就会自动显示为一行，并在末尾添加省略号。

上一篇：css background 渐变

下一篇：css 设置背景图片