一、首先依次介紹這幾個文字處理的CSS屬性
1、word-break:
word-break 屬性規定自動換行的處理方法。
當行尾放不下一個單詞時,決定單詞內部該怎麼擺放。
break-all: 強行上,擠不下的話剩下的就換下一行顯示。
keep-all: 放不下我了,那我就另起一行展示,再放不下,我也不退縮。類似於word-wrap:normal
2、word-wrap :
word-wrap 屬性允許長單詞或 URL 地址換行到下一行。
當行尾放不下時,決定單詞內是否允許換行
normal: 單詞太長,換行顯示,再超過一行就溢出顯示。
break-word: 當單詞太長時,先嚐試換行,換行後還是太長,單詞內還可以換行。
(上面這些換行都是針對英文單詞,對於CJK(中文/日文/韓文)這樣的語言就不需要了。)
3、white-space :
white-space 屬性設置如何處理元素內的空白。
normal | 默認。空白會被瀏覽器忽略。 |
pre | 空白會被瀏覽器保留。其行爲方式類似 HTML 中的 <pre> 標籤。 |
nowrap | 文本不會換行,文本會在在同一行上繼續,直到遇到 <br> 標籤爲止。 |
pre-wrap | 保留空白符序列,但是正常地進行換行。 |
pre-line | 合併空白符序列,但是保留換行符。 |
inherit | 規定應該從父元素繼承 white-space 屬性的值。 |
二、實現文本末尾省略號
共分三步:
1:white-space:nowrap,禁止超出的文本換行顯示
2:overflow:hidden超出元素邊框部分溢出隱藏
3:text-overflow:ellipsis文本省略號