CSS樣式-文字在一行內顯示不換行，超出部分用省略號（white-space、overflow、text-overflow、word-wrap、word-break）

樣例：

1 <p style="width: 100px; height: 50px; border: 1px solid blue; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
2 例如這樣的一行字比較多，一行是顯示不了的，那麼多出的部分就會用省略號代替
3 </p>

主要是下面的樣式起做用：

1 white-space: nowrap;
2 overflow: hidden;
3 text-overflow: ellipsis;

把文本限制在一行（white-space: nowrap;），確定這一行是有限制的(width)，而且你的溢出的部分要隱藏起來（overflow: hidden；），而後出現省略號（ text-overflow: ellipsis）

 

text-overflow 屬性規定當文本溢出包含元素時發生的事情。

• clip:修剪文本
• ellipsis:顯示省略符號來代替被修剪的文本

要實現溢出時產生省略號的效果還須定義：強制文本在一行內顯示（white-space:nowrap）及溢出內容爲隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省略號的效果。

 

white-space 屬性設置如何處理元素內的空白。（若文本中有"   "或"<br>"不管white-space如何設置都會顯示空格或回車）

• normal 默認。空白會被瀏覽器忽略。
• pre 空白會被瀏覽器保留。其行爲方式相似 html 中的 <pre> 標籤。
• nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤爲止。
• pre-wrap 保留空白符序列，可是正常地進行換行。
• pre-line 合併空白符序列，可是保留換行符。
• inherit 規定應該從父元素繼承 white-space 屬性的值。

word-wrap、word-break 和white-space的區別：

word-wrap 屬性容許長單詞或 URL 地址換行到下一行。

• normal 默認，只在容許的斷字點換行（瀏覽器保持默認處理，通常是空格處）
• break-word 在長單詞或url地址內部進行換行

word-break 屬性規定自動換行的處理方法。

• normal 使用瀏覽器默認的換行規則。
• break-all 容許在單詞內換行。
• keep-all 只能在半角空格或連字符處換行。

word-wrap: break-word 和 word-break: break-all區別

1 p
2 {
3 width:11em; 
4 border:1px solid #000000;
5 word-wrap:break-word;
6 }

1 p
2 {
3 width:11em; 
4 border:1px solid #000000;
5 word-break:break-all;
6 }

能夠經過比較看出：

word-break: break-all 正如其名，全部的都換行。一點空隙都不放過，比較緊湊。

word-wrap: break-word 若是一行文字有能夠換行的點，如空格，折線或CJK(Chinese/Japanese/Korean)(中文/日文/韓文)之類的，就不會斷開英文單詞或字符了，只會在這些換行點處換行，不會考慮緊湊，對齊和美觀問題。