CSS 文本溢出显示省略号

在网页设计中，文本溢出是一个常见的问题。当一个元素的内容超出其指定的宽度或高度时，文本会溢出到父元素或周围的区域中，给用户带来不好的阅读体验。为了解决这个问题，可以使用 CSS 的 text-overflow 属性来显示省略号(...)来表示文本被截断。

本文将详细介绍 CSS 文本溢出显示省略号的相关属性和用法，让你能够灵活运用这些技巧来优化网页内容的显示效果。

1. text-overflow 属性

text-overflow 属性用于定义溢出元素文本的显示样式。它主要有以下三个属性值可选择：

• clip：默认值，表示将溢出的文本截断，不显示省略号；
• ellipsis：表示使用省略号(...)来代替溢出的文本；
• fade：在支持的浏览器中，表示使用渐变的方式来隐藏溢出的文本。

示例代码如下：

.overflow-text {
  white-space: nowrap; /* 强制文本在同一行显示 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号显示溢出的文本 */
}

运行结果如下图所示：

这里是超长文本，超过了指定宽度的部分将被省略...

2. white-space 属性

white-space 属性用于设置元素内部文本的处理方式。对于解决文本溢出问题，常使用 white-space 的 nowrap 值来强制文本在一行显示，防止自动换行。

示例代码如下：

.overflow-text {
  white-space: nowrap; /* 强制文本在同一行显示 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号显示溢出的文本 */
}

运行结果如下图所示：

这里是超长文本，超过了指定宽度的部分将被省略...

3. overflow 属性

overflow 属性用于设置元素内部内容溢出时的处理方式。在解决文本溢出问题时，常使用 overflow 的 hidden 值来隐藏溢出的部分，以避免内容显示不完整。

示例代码如下：

.overflow-text {
  white-space: nowrap; /* 强制文本在同一行显示 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号显示溢出的文本 */
}

运行结果如下图所示：

这里是超长文本，超过了指定宽度的部分将被省略...

4. 宽度和高度的设置

要使文本溢出显示省略号生效，必须要为元素指定一个明确的宽度或高度。否则，溢出的文本将会在没有约束的情况下自动换行或扩展元素。

示例代码如下：

.overflow-text {
  width: 200px;  /* 指定宽度为 200 像素 */
  white-space: nowrap; /* 强制文本在同一行显示 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号显示溢出的文本 */
}

运行结果如下图所示：

这里是超长文本，超过了指定宽度的部分将被省略...

5. 多行文本溢出处理

上述的方法仅适用于处理单行文本的溢出显示，对于多行文本的处理，CSS 并没有提供直接的方法。但是我们可以借助 JavaScript 或 CSS 的 display 属性实现多行文本的溢出显示。

5.1 使用 JavaScript 处理

我们可以通过 JavaScript 获取元素的高度和文本内容，然后根据实际高度判断是否溢出文本。如果溢出，则使用省略号来代替溢出的部分。

示例代码如下：

<div class="overflow-text" id="myDiv">
  这是一段超长的文本，它将在单行中显示，希望能够通过 JavaScript 处理多行文本溢出显示。
</div>

<script>
  var div = document.getElementById("myDiv");
  var lineHeight = parseInt(window.getComputedStyle(div).getPropertyValue("line-height"));
  var lines = div.offsetHeight / lineHeight;

  if (lines > 1) {
    div.classList.add("multiline-overflow");
  }
</script>

.overflow-text {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multiline-overflow {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

运行结果如下图所示：

这是一段超长的文本，它将在单行中显示，希望能够通过...

5.2 使用 CSS 处理

在某些场景下，使用 CSS 处理多行文本溢出更为简便。我们可以使用 CSS 的 display 属性结合 -webkit-line-clamp 属性来限制多行文本的显示行数，并使用省略号来表示溢出的内容。

示例代码如下：

.overflow-text {
  width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 设置显示的最大行数为 2 行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

运行结果如下图所示：

这是一段超长的文本，它将在单行中显示，希望能够通过...

结语

通过使用 CSS 的 text-overflow 属性和相关的样式属性，我们可以轻松地解决网页中文本溢出显示省略号的问题。无论是单行文本还是多行文本，都可以通过前面介绍的方法来实现优雅的溢出效果，并提升用户的阅读体验。