css单行省略

作者：末世修罗发布日期:2025-04-10 浏览:108

/* 单行省略的CSS代码 */

.text-ellipsis {
  white-space: nowrap; /* 强制文本在一行内显示，不换行 */
  overflow: hidden;    /* 超出容器宽度的内容隐藏 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
}

解释说明：

white-space: nowrap;：确保文本不会换行，所有内容都显示在同一行。
overflow: hidden;：当文本超出容器的宽度时，超出的部分会被隐藏。
text-overflow: ellipsis;：当文本被截断时，使用省略号（...）来表示被隐藏的内容。

将这些样式应用到一个元素上，可以使该元素内的文本在一行内显示，并在超出容器宽度时自动添加省略号。

上一篇：css边框渐变

下一篇：css transform translate