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

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

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

// html
<div class="one_line">這是單行文字,超過 150px 時,將顯示省略符號</div>

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

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

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

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

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

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

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

// html
<div class="multiple_line">這是多行文字,超過一定寬度時,將顯示省略符號。</div>

// 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.

您可在此處留言

搶先留言!

Notify of
avatar
wpDiscuz