知識點------文字超出（單行，兩行）顯示省略號（...）

 

文字超出單行不換行，顯示省略號

.word {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;   --------------- 單詞不換行

  word-wrap: break-word; --------------- 整個單詞換行
  word-break: break-all; --------------- 單詞內換行 (單行顯示省略號，後面兩個屬性可以不加)
}

文章超出兩行出現省略號...

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;   // ============這裏指的是要實現對應number的行數，實現多行的關鍵點
-webkit-box-orient: vertical; 



英文單詞時：
word-wrap:break-word; --- word-wrap: 屬性允許長單詞或URL地址換行到下一行, break-word: 單詞內換行
word-break:break-all;  ------------------ word-break: 規定自動換行的處理方式，break-all: 允許單詞內換行



總結：
word-wrap: break-word；  ------------ 整個單詞換行
word-break: break-all;   ------------ 單詞內換行
white-space: nowrap;     ------------ 單詞不換行