1. 強制不換行，並且多行文字溢出顯示省略號
.ellips{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .ellips_line2,.ellips_line3{display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;} //chrome下的私有屬性 .ellips_line2{-webkit-line-clamp:2;} //顯示兩行，超出的用省略號顯示 .ellips_line3{-webkit-line-clamp:3;} //顯示三行，超出的用省略號顯示
2. 自動換行
div{ word-wrap: break-word; //只對英文起作用，以單詞作為換行依據。 word-break: normal; }
3. 強制英文單詞斷行
div{ word-break:break-all; //只對英文起作用，以字母作為換行依據。
}
white-space 可能的值，如下表
| 值 | 描述 |
|---|---|
| normal | 默認。空白會被瀏覽器忽略。 |
| pre | 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。 |
| nowrap | 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。 |
| pre-wrap | 保留空白符序列，但是正常地進行換行。 |
| pre-line | 合並空白符序列，但是保留換行符。 |
| inherit | 規定應該從父元素繼承 white-space 屬性的值。 |
word-wrap 可能的值, 如下表
| 值 | 描述 |
|---|---|
| normal | 只在允許的斷字點換行（瀏覽器保持默認處理）。 |
| break-word | 在長單詞或 URL 地址內部進行換行。 |
word-break 可能的值，如下表
| 值 | 描述 |
|---|---|
| normal | 使用瀏覽器默認的換行規則。 |
| break-all | 允許在單詞內換行。 |
| keep-all | 只能在半角空格或連字符處換行。 |
word-break:break-all和word-wrap:break-word都是能使其容器如DIV的內容自動換行
它們的區別就在於：
1. word-break:break-all 例如div寬200px，它的內容就會到200px自動換行，如果該行末端有個英文單詞很長（congratulation等），它會把單詞截斷，變成該行末端為congra(congratulation的前端部分)，下一行為tulation（conguatulation）的后端部分了。如下圖：
2. word-wrap:break-word 例子與上面一樣，但區別就是它會把congratulation整個單詞看成一個整體，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷掉的。如下圖：
