如何實現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;
}

通過上述代碼，我們可以拿到文本節點並根據元素高度計算出行數後，不斷裁剪文本字元串並添加省略號，直到獲取到合適的文本節點並實現省略號截斷。