css3強制換行和超出隱藏實現

一、強制換行

word-break: break-all;      只對英文起作用，以字母作為換行依據。

word-wrap: break-word;   只對英文起作用，以單詞作為換行依據。

white-space: pre-wrap;     只對中文起作用，強制換行。

解析：

word-break:break-all 和 word-wrap:break-word 都是使容器如DIV的內容自動換行，它們的區別在於：
1、word-break:break-all 
假設div寬度為450px，它的內容就會到450px自動換行，如果該行末端有個很長的英文單詞，它會把單詞截斷，一部分保持在行尾，另一部分換到下一行。
2、word-wrap:break-word 
例子與上面一樣，但區別就是它會把整個單詞看成一個整體，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷掉。如果在下一行整個寬度依然不夠顯示整個單詞，那才會如上面一樣截斷處理。

二、超出隱藏

1.單行隱藏

div{/* 單行溢出隱藏 */
       white-space: nowrap;     
       text-overflow: ellipsis;
       overflow: hidden;
}

white-space:nowrap; 是禁止換行。
overflow:hidden; 是多出隱藏
text-overflow:ellipsis; 讓多出的內容以省略號...來表達。但是這個屬性主要用於IE等瀏覽器，Opera瀏覽器用-o-text-overflow:ellipsis; 而Firefox瀏覽器沒有這個功能，多出的內容只能隱藏起來。

2.多行隱藏

div{/* 多行溢出隱藏 */
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 3;
       overflow: hidden;
}

-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 為了實現該效果，它需要組合其他的WebKit屬性。常見結合屬性：

display: -webkit-box; 必須結合的屬性 ，將對象作為彈性伸縮盒子模型顯示 。

-webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。

默認結尾帶有省略號...