css實現字數超過指定行數顯示省略號...

問題描述

不少時候都會遇到有字數控制的需求。好比不超過兩行就所有顯示，超過兩行就把多餘的字隱藏並顯示省略號。利用-webkit-line-clamp屬性能夠很簡單的實現這個需求。

關於-webkit-line-clamp屬性

限制在一個塊元素顯示的文本的行數。
-webkit-line-clamp 是一個 不規範的屬性（unsupported WebKit property），它沒有出如今 CSS 規範草案中。

爲了實現該效果，它須要組合其餘外來的WebKit屬性。常見結合屬性：

display: -webkit-box; 必須結合的屬性 將對象做爲彈性伸縮盒子模型顯示 。
-webkit-box-orient 必須結合的屬性 設置或檢索伸縮盒對象的子元素的排列方式 。
text-overflow 能夠用來在多行文本的狀況下，設定超出範圍的文本的隱藏方式。如text-overflow:ellipsis就是用省略號「...」隱藏超出範圍的文本。

若是標籤內是英文字符

當標籤內是英文字符的時候你就會發現樣式失效了。英文是不會自動換行的，因此添加以下屬性以兼容英文字符。

word-wrap:break-word;
word-break:break-all;

開發中遇到的小問題：

失蹤的代碼～～～

我在vue文件中的style區域寫了以下的less代碼，可是當我啓動項目到chrome瀏覽器查看效果的時候，卻發現失蹤了一行代碼： -webkit-box-orient: vertical;。致使我樣式失效...

.linecamp{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
  word-wrap:break-word;
  word-break:break-all;
}

解決方案

• 最後找了半天緣由，改了很久webpack配置都沒有解決問題。後來經大神指點，是由於我這段less代碼寫在了vue文件裏，而項目編譯時vue調postcss對less進行處理的時候把這行代碼刪掉了。
• 我把這段代碼抽離到了index.less裏面，在vue文件直接引用這個樣式類linecamp。代碼出現～問題消失～
• 也算是很靈異的一個問題了，長見識～～