Background

工作上遇到了一個 RWD 標題限定最多兩行，超過兩行的文字直接隱藏的需求，目的是為了讓標題字數超出數量的時候不影響美觀，以往的 CSS 只能單行隱藏，但今天我們要使用的 line-clamp 屬性就不同，他可以實現多行文字的效果，以下記錄以下 line-clamp 的用法，不多說直接看 Code。

<h1 class="title truncate-oneline">Lorem ipsum dolor sit amet consectetur adipisicing elit.
</h1>
<h1 class="title truncate-multiline">Lorem ipsum dolor sit amet consectetur adipisicing elit.
</h1>

.title {
  width: 200px;
  overflow: hidden;
}

.truncate-oneline {
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

參考資料

line-clamp