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

1. CSS实现单行文本溢出省略号

1.1 使用text-overflow属性

要实现单行文本溢出显示省略号，可以使用CSS的text-overflow属性。text-overflow属性用于指定当文本溢出容器时的处理方式。其中，text-overflow有以下几个可选值：

clip：裁剪文本，不显示省略号。

ellipsis：显示省略号来代表被裁剪的文本。

string：使用指定的字符串来表示被裁剪的文本。

为了实现单行文本溢出省略号，我们可以设置overflow属性为hidden，然后将white-space属性设置为nowrap，这样可以保证文本不换行。最后，使用text-overflow属性设置为ellipsis，即可显示省略号。

.single-line-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

以上代码将被应用于具有.single-line-text类的元素，使其溢出的文本显示省略号。

值得注意的是，以上方法只适用于单行文本溢出显示省略号，对于多行文本无法达到预期效果。

2. CSS实现多行文本溢出省略号

2.1 使用WebKit浏览器的-webkit-line-clamp属性

对于多行文本溢出显示省略号，可以使用WebKit浏览器的-webkit-line-clamp属性。该属性是一个非标准的WebKit扩展，它控制显示的文本行数，并用省略号表示被裁剪的文本。

.multi-line-text {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 控制显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

以上代码将被应用于具有.multi-line-text类的元素，使其溢出的文本显示省略号，并且最多显示两行文本。

需要注意的是，-webkit-line-clamp属性只在WebKit浏览器中生效。

2.2 使用JavaScript计算文本行数

如果需要在非WebKit浏览器中实现多行文本溢出省略号效果，可以通过JavaScript动态计算文本行数并裁剪文本实现。

.multi-line-text {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 控制显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.multi-line-text.js-ellipsis {
  position: relative;
  overflow: hidden;
}
.multi-line-text.js-ellipsis::after {
  content: "…";
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 4px;
  background: white;
}

以上代码将被应用于具有.multi-line-text类的元素，使其溢出的文本显示省略号，并且最多显示两行文本。对于非WebKit浏览器，我们添加了一个额外的.js-ellipsis类，并使用::after伪元素在文本末尾添加省略号。

为了实现自动计算文本行数的效果，我们可以使用JavaScript来动态计算文本行数并根据行数添加.js-ellipsis类。以下是实现的JavaScript代码：

var elements = document.getElementsByClassName('multi-line-text');
for (var i = 0; i < elements.length; i++) {
  var element = elements[i];
  var lineHeight = parseInt(window.getComputedStyle(element).lineHeight);
  var maxHeight = lineHeight * 2; // 最多显示两行文本
  if (element.offsetHeight > maxHeight) {
    element.classList.add('js-ellipsis');
  }
}

以上JavaScript代码会遍历具有.multi-line-text类的元素，计算元素的实际高度是否超过最大允许高度，如果超过，则为元素添加.js-ellipsis类，以显示省略号。

注意，使用此方法时，需要确保在DOM渲染完成后执行JavaScript代码。

3. 总结

通过使用CSS的text-overflow属性，我们可以实现单行文本溢出显示省略号的效果。而对于多行文本溢出显示省略号，可以利用WebKit浏览器的-webkit-line-clamp属性，或者使用JavaScript动态计算文本行数的方法。根据使用场景和浏览器兼容性要求，选择适合的方法来实现文本溢出省略号效果。