CSS3 設定文字多行時會自動隱藏並加上…

html

 <p class="txt">
這裡顯示的則是單純為一行的文字，第二行則是會隱藏不見。
</p>


<p class="txt-line-clamp3">
這裡顯示的則是為三行的文字，第四行則是會隱藏不見。並在第三行的最後一個文字的尾巴加上點點點的符號。
</p>

<p class="txt-line-clamp2">
這裡顯示的則是單純為兩行的文字，第三行則是會隱藏不見。並在第二行的最後一個文字的尾巴加上點點點的符號。
</p>

CSS語法

.txt{
  width:400px;
  border:solid 1px #ccc;
}
.txt-line-clamp2{
  width:400px;
  border:solid 1px #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
   -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

}

.txt-line-clamp3{
  width:400px;
  border:solid 1px #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

實際套用後，發現這個語法對 Safari 不適用，建議加上 height 的高度限制