css 超出省略

作者：空白篇pia~ 发布日期:2026-07-11 浏览:104

/* 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 content

下一篇：css虚线边框怎么设置