css 溢出省略号

作者：菠蘿。d海发布日期:2025-07-02 浏览:81

/* 示例代码：CSS 溢出省略号 */

.text-ellipsis {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden;    /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 使用省略号表示被隐藏的文本 */
  width: 200px;        /* 设置一个固定宽度，以便溢出效果生效 */
}

解释说明：

white-space: nowrap;：防止文本换行，确保所有文本都显示在同一行。
overflow: hidden;：当文本超出容器的宽度时，隐藏超出部分。
text-overflow: ellipsis;：当文本被截断时，使用省略号（...）来表示被隐藏的部分。
width: 200px;：设置一个固定的宽度，以确保溢出效果能够生效。如果没有设置宽度或高度，溢出效果可能不会出现。

你可以将这个类应用到任何 HTML 元素上，例如 <p>、<div> 等，以实现溢出时显示省略号的效果。

上一篇：css repeat

下一篇：css solid