實現文字顯示單行或多行，超出部分用省略號顯示是乙個很常見的需求，在這裡做個分享記錄。(文末有 demo 演示~)
下面是單行縮略的實現：
overflow
: hidden;
text-overflow
: ellipsis;
white-space
: nowrap;
單行縮略很簡單，唯一比較生疏的是text-overflow: epllipsis;
下面關於 text-overflow 的解釋截自 mdn
text-overflow屬性確定如何向使用者發出未顯示的溢位內容訊號。它可以被剪下，可以顯示乙個省略號，還可以顯示乙個自定義字串。
多行溢位縮略的解決相較單行要複雜一些，下面是實現方案：
overflow
: hidden;
text-overflow
: ellipsis;
display
: -webkit-box;
-webkit-line-clamp
: 2;
-webkit-box-orient
: vertical;
-webkit-line-clamp設定縮略行數，上面示例為2行縮略
css文字溢位省略
在做響應式網頁的時候，我們要想在不同尺寸的裝置下保證布局不會錯亂，就需要對文字的長度進行限定。在介紹下面的方法之前，我們先對所有的例子進行基礎的樣式設定 基礎設定 div.box 設定好啦，現在我們開始表演 1.單行溢位隱藏顯示 box text box1 目錄結構清晰是首要目標，至於命名只要能達到...
css 文字溢位省略號
css 文字溢位後顯示省略號，這是乙個非常常規的操作，但是你會發現在網上很多給出的例子兩行之後顯示省略號，卻沒有用。這是為什麼呢？please look follow。在一行省略的 text oneline簡單介紹下 white space 這個是處理空白符的，但是這東西還不是這麼簡單的。這是一些文...
文字省略顯示
效果 與多年不見的朋友相聚。露天咖啡廳，裊裊的咖啡香，落日映紅霞，餘暉灑落在我們身邊，如一幅陣年遺香的掛畫。歲月橫隔在彼此間，那些遙遠的念想溶入靜美的年華中，時光宛如遲暮美人，盈水邀月，橫笛玉音，輕紗漫舞。只是 如花美眷，又怎敵似水流年。div 2.js contents conts each fu...