当前位置：首页 > news >正文

CSS实现单行、多行文本溢出显示省略号（…）

news 来源：原创 2025/5/9 10:28:26

在网页设计中，我们常常遇到这样的情况：文本内容太长，无法完全显示在一个固定的区域内。为了让界面看起来更整洁，我们可以使用省略号（…）来表示内容溢出。这不仅能提升用户体验，还能避免内容溢出导致的页面混乱。

本文将介绍如何用 CSS 实现 单行文本溢出省略号 和 多行文本溢出省略号。

1. 单行文本溢出省略号

对于单行文本溢出省略号，CSS 提供了一个非常简单的解决方案，只需要使用几个常见的属性即可。

代码示例：

<div class="single-line">
  这是一段非常长的文本，如果文本内容超过了这个容器的宽度，它会显示省略号。
</div>

.single-line {
  width: 200px;           /* 设置容器宽度 */
  white-space: nowrap;    /* 不换行 */
  overflow: hidden;       /* 超出容器的部分隐藏 */
  text-overflow: ellipsis; /* 超出的部分用省略号表示 */
}

解释：

white-space: nowrap;：禁止文本换行，让文本保持在同一行。
overflow: hidden;：隐藏超出容器的内容。
text-overflow: ellipsis;：在文本超出容器时显示省略号。

通过这三个属性，文本会在容器宽度不足时自动显示省略号。

2. 多行文本溢出省略号

有时，我们希望文本是多行的，并且当文本超过指定行数时也显示省略号。这个功能在网页中非常常见，比如新闻摘要、文章简介等。

代码示例：

<div class="multi-line">
  这是一个多行文本示例。如果文本太长，它将显示省略号。你可以继续添加更多的内容，直到它超出设置的行数。
</div>

.multi-line {
  width: 300px;             /* 设置容器宽度 */
  height: 60px;             /* 设置固定高度（显示两行文本） */
  line-height: 30px;        /* 行高，确保文本正常显示 */
  overflow: hidden;         /* 超出部分隐藏 */
  display: -webkit-box;     /* 使用 Flexbox 布局 */
  -webkit-box-orient: vertical; /* 设置盒子为垂直方向排列 */
  -webkit-line-clamp: 2;    /* 限制显示的行数 */
  text-overflow: ellipsis;  /* 超出部分用省略号表示 */
}

解释：

display: -webkit-box;：让元素使用 WebKit 盒子模型布局（主要是为了兼容 Webkit 引擎的浏览器，如 Chrome 和 Safari）。
-webkit-box-orient: vertical;：设置布局为垂直方向，使文本按行显示。
-webkit-line-clamp: 2;：限制显示的行数，2 表示最多显示两行文本，超出的部分会被省略。
text-overflow: ellipsis;：超出部分显示省略号。

注意事项：

-webkit-line-clamp 是一个 WebKit 特有的 CSS 属性，因此它在某些浏览器（如 Firefox）中可能不被支持。
多行溢出效果并非所有浏览器都支持，特别是 Firefox 在某些版本中可能没有实现这一特性，具体支持情况可以参考各浏览器的文档。

总结

使用 CSS 实现单行和多行文本溢出显示省略号是一个非常常见且简单的功能，可以大大提升网页的排版和用户体验。在单行文本溢出时，使用 text-overflow: ellipsis 配合 white-space: nowrap 和 overflow: hidden 就可以实现。而对于多行文本溢出，可以借助 Webkit 提供的 -webkit-line-clamp 来限制显示的行数并加上省略号。