一、首先依次介紹這幾個文字處理的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文本省略號
