CSS 文本溢出 CSS 截断

在本文中，我们将介绍如何使用CSS来处理文本溢出问题，并实现文本的截断显示效果。

阅读更多：CSS 教程

什么是文本溢出？

当一个元素的宽度固定且内容超出其显示区域时，就会发生文本溢出。这通常发生在容器元素设置了固定宽度的情况下，内容长度超过了容器的宽度。

例如，我们有一个固定宽度的 div 容器，其中包含了一个很长的文本。

<div class="container">
  Long text here...
</div>

如果我们不对文本溢出进行处理，那么长文本将会超出容器的显示区域，从而导致布局混乱。因此，我们需要使用 CSS 的 text-overflow 属性来处理这个问题。

CSS text-overflow 属性

CSS 的 text-overflow 属性用于控制文本溢出的显示方式。

常用的属性值有：

clip：默认值，表示直接裁剪文本，超出部分不显示。
ellipsis：使用省略号（…）表示被截断的文本。

在使用 text-overflow 属性时，通常还会配合使用 overflow 属性和 white-space 属性。

overflow 属性用于设置元素内容溢出时的处理方式。常用值有：
- visible：内容超出部分可见，不进行裁剪。
- hidden：内容超出部分不可见，进行裁剪。
- scroll：内容超出部分可滚动查看。

white-space 属性用于设置如何处理元素中的空白字符。常用值有：
- normal：合并空白字符，换行符被当作空格处理。
- nowrap：空白字符不换行，超出部分被裁剪。
- pre：保留空白字符的原始格式。

下面是一个示例，展示了如何使用 text-overflow 属性。

<style>
  .container {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<div class="container">
  Long text here...
</div>

在上面的例子中，容器 div 的宽度为200px，如果文本内容超过了200px，就会被隐藏，并用省略号表示被截断的文本。

支持多行文本溢出

上述的 text-overflow 属性只适用于单行文本，如果我们有多行文本需要进行溢出处理，需要使用一些额外的技巧。

使用单行的文本容器

一种常见的处理方式是使用单行的文本容器，然后通过设置容器的高度和行数来实现多行文本的溢出效果。

<style>
  .container {
    width: 200px;
    height: 60px;
    overflow: hidden;
  }
  .text {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 最多显示3行文本 */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
</style>

<div class="container">
  <div class="text">
    Long text here...
  </div>
</div>

在上面的例子中，通过设置容器的高度为60px，并设置文本的行数最多为3行来实现多行文本的显示。超出的部分将被隐藏，并用省略号表示。

使用 JavaScript 辅助实现

另一种处理多行文本溢出的方式是使用 JavaScript 辅助实现。我们可以通过计算文本的高度和容器的高度来判断是否需要进行溢出处理，并实现动态的截断效果。

以下是一个使用 JavaScript 辅助实现多行文本截断的示例：

<style>
  .container {
    max-height: 100px;
    overflow: hidden;
  }
  .text {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 最多显示3行文本 */
    -webkit-box-orient: vertical;
  }
</style>

<div class="container">
  <div class="text" id="text">
    Long text here...
  </div>
</div>

<script>
  var textElement = document.getElementById("text");
  var containerElement = textElement.parentNode;

  var lineHeight = parseInt(getComputedStyle(textElement).lineHeight);
  var lines = containerElement.clientHeight / lineHeight;

  if (textElement.scrollHeight > containerElement.clientHeight) {
    while (textElement.scrollHeight > containerElement.clientHeight) {
      textElement.textContent = textElement.textContent.replace(/s+S*$/, "...");
    }
  }
</script>

在上面的例子中，首先获取了文本容器的高度和每行的高度，然后通过比较文本的实际高度与容器的高度，如果文本的实际高度超过容器的高度，则根据每行的高度逐步去掉最后一个单词，直到文本的实际高度不再超过容器的高度。

这样，我们就可以动态地实现多行文本的截断效果。

总结

通过使用 CSS 的 text-overflow 属性，我们可以很方便地处理文本溢出问题，并实现文本的截断显示效果。对于单行文本，只需要设置适当的宽度、溢出处理方式和省略号的表示；对于多行文本，可以通过设置容器的高度和行数来实现溢出处理，或者使用 JavaScript 辅助计算文本的高度并动态截断。

希望本文对您理解和使用 CSS 的 text-overflow 属性有所帮助！