css 單行文字 多行文字超過用省略號表示

1、單行文字超過省略

/* 這裏要顯示的設置寬度 */
overflow: hidden;
white-space: nowrap;
/* 文字超出寬度則顯示ellipsis省略號 */
text-overflow: ellipsis;
width: 100%;

 

2、多行文字超過省略

display: -webkit-box; 
overflow: hidden;
/*! autoprefixer: off */
-webkit-box-orient: vertical;  /* 設置方向 */
/* autoprefixer: on */
-webkit-line-clamp: 2;  /* 設置超過爲省略號的行數 */
text-overflow: ellipsis;

3、換行word-break和word-wrap

• white-space:normal(自動換行)，當寫入的文字超過定義的寬度後會自動換行，但當寫入的數據是一堆沒有空格的字符或者字母或者數字時，超過容器的寬度時就會把容器撐大，不換行
• 這時可以用：word-break:break-all;word-wrap:break-word來解決
• word-break:break-all在超過容器寬度時，若有一個單詞很長，則會將單詞截斷，分開寫
• word-wrap:break-word在超過容器寬度時，若有一個單詞很長，則會將單詞放到下一行，而不對單詞進行截斷

• word-break : normal | break-all | keep-all
  normal :允許在字內換行
  break-all : 允許在單詞內換行
  keep-all : 只能在半角空格或連字符處換行。
  
  word-wrap : normal | break-word
  normal : 允許內容頂開指定的容器邊界
  break-word : 內容將在邊界內換行。如果需要，詞內換行（word-break）也會發生