CSS 多行文字顯示 ... 的效果

原來還有這種盒子。

簡述

一般要用 CSS 做出「文字…」的效果只適用於單行文字，作法可以參考我以前寫的 CSS 讓文字有 … 的效果。

今天我發現了一個新的方法，它不需要 JavaScript，只要 CSS 就可以達成。

新的盒子

這邊要用一個叫做 -webkit-box 的屬性來達成，這裡先示範怎麼做出「多行文字…」的效果，等等再來說明 -weblit-box 是什麼。

備註：前綴字已經透露這只能用在 webkit 瀏覽器，也就是 Google 或 Safari。

HTML：

<style>
  div {
    /* 新的盒子 */
    display: -webkit-box;
    /* 設定盒子內的排列方向 */
    -webkit-box-orient: vertical;
    /* 要顯示幾行文字 */
    -webkit-line-clamp: 10;
    /* 超出的範圍隱藏 */
    overflow: hidden;
    width: 300px;
    border: 1px solid #000;
    margin: 20px;
  }
</style>
<div>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas in iure ullam quia repellat. Voluptates excepturi debitis ipsam nulla pariatur saepe dolore dolor nesciunt, placeat recusandae blanditiis. Quae commodi eius sint at alias numquam adipisci nisi, consequatur repellat laboriosam dicta et similique nemo excepturi quasi in deleniti fugiat cupiditate aliquam neque iure iusto voluptatem. Ullam unde totam iure deleniti, molestias perspiciatis quis eaque eveniet distinctio! Dolore eligendi laborum, voluptatem eum explicabo culpa, nostrum blanditiis molestiae aliquam fugit veritatis pariatur nam enim? Perspiciatis porro molestias laboriosam sequi eveniet distinctio, reiciendis impedit vel? Harum esse facere ullam expedita quod tenetur, a repellat.
</div>

Output：

所以下次懶得寫 JS 的話可以考慮用這個方法來做，會省事很多～

關於 webkit-box

它跟 flex-box 有 87 分像，所以可以想成是另一種 flex 就好了（但還是不一樣哦）。

這邊做一個一個示範你就大概懂了：

<style>
  section {
    /* 可以想成是 display: flex */
    display: -webkit-box;
    /* 跟 align-item 一樣 */
    -webkit-box-align: start;
    /* 
      跟 flex-direction 一樣
      值有 horizontal 跟 vertical
    */
    -webkit-box-orient: horizontal;
  }
  div {
    width: 300px;
    border: 1px solid #000;
    margin: 20px;
  }
  div + div {
    /* flex: 1 */
    -webkit-box-flex: 1;
  }
</style>
<section>
  <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut minus molestias adipisci, eos praesentium cum! Necessitatibus, a. Pariatur iusto rem ea natus nobis voluptatum distinctio, sed saepe, ex repudiandae magni?</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, ex quia, ipsa dolores repudiandae corrupti facere impedit, explicabo nobis optio suscipit temporibus harum ipsum accusamus quas. Illum quam qui debitis, quo fugit nisi eligendi, sit porro suscipit blanditiis praesentium, ducimus totam facilis illo omnis obcaecati quis saepe non adipisci. Alias, odit nulla totam reprehenderit cupiditate modi ab nostrum, dolor, incidunt ex perspiciatis velit illum deleniti eaque aperiam eos dolores laboriosam.</div>
</section>

大概知道一下就好，你不會想拿這個來排版，主要用途還是上面的多行文字…效果。