CSS 超出显示省略号

在Web开发中，经常会遇到文本内容过长的情况，这时候我们希望能够将超出容器宽度的文本进行省略显示，以保持页面的整洁和美观。CSS提供了一个属性来实现这个效果，即text-overflow: ellipsis。

1. text-overflow属性介绍

text-overflow属性控制文本超出容器时的显示方式，其常见取值有以下几种：

clip：超出部分将被剪切，不显示省略号。
ellipsis：超出部分将被隐藏，并显示省略号。
inherit：继承父元素的text-overflow属性。

需要注意的是，该属性只在以下条件下生效：

元素的white-space属性值为nowrap或pre。
元素的overflow属性值为hidden或scroll。
元素必须有一个确定的宽度。

2. 使用text-overflow: ellipsis实现省略号的显示

下面我们将介绍如何使用text-overflow: ellipsis属性来实现文本的省略显示。

首先，我们需要创建一个容器元素，并设置其宽度及其他样式，以确定内容超过容器时的溢出情况。接下来，将文本内容放置在该容器中。

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

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

在上述示例中，我们创建了一个宽度为200px的容器，并设置了text-overflow: ellipsis属性。文本内容为Lorem ipsum dolor sit amet, consectetur adipiscing elit. 当内容超过容器宽度时，超出部分将被隐藏，并且会显示省略号。

效果如下所示：

Lorem ipsum dolor sit amet, consectetur adipiscing elit…

这样，当文本内容过长时，就可以通过text-overflow: ellipsis属性来实现省略号的显示。

3. 解决多行文本的省略显示问题

上述的示例只适用于单行文本的省略显示，如果需要处理多行文本的情况，我们需要结合其他属性来实现。

3.1 使用display: -webkit-box结合-webkit-line-clamp实现多行省略

在某些Web浏览器（如WebKit内核的浏览器）中，我们可以结合使用display: -webkit-box和-webkit-line-clamp属性来实现多行文本的省略显示。

首先，设置-webkit-line-clamp的值为要显示的行数，然后使用-webkit-box-orient将元素设置为垂直排列。

<style>
  .container {
    width: 200px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non mauris vitae.
</div>

上述示例中，我们设置了-webkit-line-clamp为2，即显示两行文本。当文本内容超过两行时，超出部分将被隐藏，并显示省略号。

效果如下所示：

Lorem ipsum dolor sit amet, consectetur adipiscing elit…

需要注意的是，这种方式只在某些特定的Web浏览器中生效，不适用于所有浏览器。

3.2 使用JavaScript计算文本行数并添加省略显示

如果需要兼容更多的浏览器，我们可以借助JavaScript来计算文本的行数，并根据行数来添加省略号。

首先，创建一个包含文本内容的容器，并使用JavaScript来获取该容器的样式，以计算每行文本的高度。

<style>
  .container {
    width: 200px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non mauris vitae.
</div>

<script>
  var container = document.querySelector('.container');
  var lineHeight = parseInt(window.getComputedStyle(container).getPropertyValue('line-height'));
  var containerHeight = parseInt(window.getComputedStyle(container).getPropertyValue('height'));
  var lineCount = containerHeight / lineHeight;
  var content = container.textContent.trim();

  if (content.split(/
||
/).length > lineCount) {
    while (container.scrollHeight > container.offsetHeight) {
      content = content.replace(/W*s(S)*$/, '...');
      container.textContent = content;
    }
  }
</script>

在上述示例中，我们使用JavaScript来获取容器的样式，并计算每行文本的高度。然后，根据文本内容的行数来添加省略号，直到容器的内容不再超出容器的高度为止。

效果如下所示：

Lorem ipsum dolor sit amet, consectetur adipiscing elit…

这样，无论文本的行数有多少，都可以通过JavaScript来动态添加省略号，实现多行文本的省略显示。