如何实现CSS文本溢出显示省略号的方法

一、使用text-overflow

text-overflow属性定义了当文本溢出包含它的元素时应该发生的内容，它能够控制文本应如何截断来适应包含它的区块。

当声明了text-overflow属性时，clip和ellipsis关键字决定了溢出文本的处理方式。

text-overflow: clip;  // 截断溢出文本，并不显示省略号
text-overflow: ellipsis;  // 截断溢出文本，并显示省略号

另外，在使用text-overflow的时候，为了让文本按照我们要求的方式被处理，我们还需要为其指定white-space和overflow属性。white-space指定如何处理元素内的换行符、空格和制表符。而overflow属性定义了溢出元素内容区域时的处理方式。

overflow: hidden; // 不显示溢出的内容，即隐藏溢出的内容
white-space: nowrap; // 溢出部分不换行

二、使用CSS实现文本溢出显示省略号的方法

我们可以使用CSS来实现文本溢出显示省略号的方法，核心思想是利用伪元素before和after和CSS3的属性linear-gradient来搭配使用。

具体实现方法如下：

/* 定义伪元素，搭配linear-gradient实现渐变效果 */
.ellipsis::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  right: 0;
  width: 70px;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #f5f5f5 50%);
}

.ellipsis::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  right: 0;
  width: 20px;
  background-color: #f5f5f5;
}

/* 使用white-space和overflow属性防止文本溢出和换行，然后使用text-overflow: clip剪裁溢出文本 */
.ellipsis{
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

通过上述代码，我们会看到文本究竟该如何被裁剪。overflow:hidden和white-space:nowrap能够保证文本不会换行，而text-overflow:clip能够保证文本溢出被裁剪，并不显示省略号。最后，通过伪元素before和after及linear-gradient实现了文本溢出时显示渐变过渡，让文本看起来更加自然。

三、使用JS实现文本溢出显示省略号的方法

若我们需要通过JS动态地实现文本溢出显示省略号的方法，可以通过遍历获取到的元素，调用JavaScript的方法来达到。

具体实现如下：

function ellipsis(element) {
  let text = element.innerHTML;
  let lineHeight = parseInt(window.getComputedStyle(element).lineHeight);
  let lines = parseInt(window.getComputedStyle(element).height) / lineHeight;
  let node = document.createTextNode(text);
  let testNode = document.createElement("span");
  testNode.appendChild(node);
  testNode.style.display = "inline-block";
  testNode.style.width = "100%";
  testNode.style.whiteSpace = "nowrap";
  element.innerHTML = "";
  element.appendChild(testNode);
  while (testNode.offsetHeight > element.offsetHeight && lines > 0) {
    text = text.substring(0, text.length - 1);
    node = document.createTextNode(text + "...");
    testNode.innerHTML = "";
    testNode.appendChild(node);
    lines--;
  }
  element.innerHTML = testNode.innerHTML;
}

通过上述代码，我们可以拿到文本节点并根据元素高度计算出行数后，不断裁剪文本字符串并添加省略号，直到获取到合适的文本节点并实现省略号截断。