技術標籤：echart橫軸文字顯示省略號

文字超過 x 行後補上省略號的幾種辦法

原文

簡單來說，在 pc 端，文字過長溢位的話，溢位的部分會被替換成...,然而在顯示情況中，更多的是在超過 x 行之後才啟用這個特性，例如

<div class="module">
  <p>
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames
    ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
    tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
    ultricies mi vitae est. Mauris placerat eleifend leo.
  </p>
</div>
 

最終希望三行之後到這種效果

為了演示，我們先定義基礎的 css，剩下的方法都在這個 css 的基礎之上

.module {
  width: 250px;
  overflow: hidden;
}

Weird WebKit Flexbox Way

使用 webkit 內建的方案

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

這種方案只有 webkit 核心的瀏覽器支援，在使用上遇到一個問題，就是 autoprefixer 會移除-webkit-box-orient: vertical;

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}

The Opera Overflow Way

Opera 瀏覽器的方案，和 webkit 差不多

.line-clamp {
  height: 3.6em; /* 1em為1個line-height的高度，這裡表示3行 */
  text-overflow: -o-ellipsis-lastline;
}

The Clamp.js Way

使用 Clamp.js

var module = document.getElementById("clamp-this-module");

$clamp(module, { clamp: 3 });

建議包裹在<p id="clamp-this-module"></p>中保證 firefox 正常使用

以下是原文的幾種顯示方案

See the Pen <a href='https://codepen.io/chriscoyier/pen/iBtep'>Line Clampin'</a> by Chris Coyier (<a href='https://codepen.io/chriscoyier'>@chriscoyier</a>) on <a href='https://codepen.io'>CodePen</a>.