[CSS] 單行文字與多行文字的省略符號

通常在文章的摘要中，我們會希望文字過多時，超過某個範圍，就顯示省略符號(…)，在 CSS 當中，單行是很容易達成的。
但多行文字時，要顯示省略符號，在 CSS 中是做不到的，只有到了 CSS3 出了其它屬性後，才有機會實現，但目前實做的結果，僅限 Safari 和 Chrome 瀏覽器。

單行文字顯示省略符號(…)

// html
這是單行文字，超過 150px 時，將顯示省略符號

// CSS
div.one_line{
  border: 1px solid red;
  width: 150px;

  /* 第一步：先禁止斷行 */
  white-space: nowrap;

  /* 第二步：超過部份隱藏 */
  overflow: hidden;

  /* 第三部：表示文字溢出時，顯示省略符號(...) */
  text-overflow: ellipsis;
}

透過上述 CSS 的三個步驟，就可以完成單行文字顯示省略符號(…)的結果，結果如下圖：

多行文字顯示省略符號(…)

此方式僅能運用在 webkit 瀏覽器，也就是 Safari及 Chrome，其它瀏覽器我們必須透過降級的方式，來勉強可以接受，也就是指定最大高度。

// html
這是多行文字，超過一定寬度時，將顯示省略符號。

// CSS
div.multiple_line{
  border:1px solid red;
  width:150px;
  
  /* 第一步：設定 display 為 -webkit-box 元素。 */
  display: -webkit-box;

  /* 第二步：設定 box 的子元素，是由上往下垂直排列。 */
  -webkit-box-orient: vertical;

  /* 第三步：設定欲顯示的行數，超出則顯示省略符號(...)。 */
  -webkit-line-clamp: 2;

  /* 第四步：設定超過上述指定之行數時隱藏。 */
  overflow: hidden;
  
  /* 第五步：其它瀏覽器降級方式：給定最大高度 */
  max-height:48px;
}

結果如下圖：

若想自己動手改改看，可透過以下 codepen：

See the Pen 單行與多行文字的省略符號 by CarlosStudio (@carlos411) on CodePen.