word-break:break-all例如div寬200px，它的內容就會到200px自動換行，如果該行末端有個英文單詞很長（congratulation等），它會把單詞截斷，變成該行末端為conra(congratulation的前端部分)，下一行為tulation（conguatulation）的後端部分了。
支援版本：ie5以上 該行為與亞洲語言的 normal 相同。也允許非亞洲語言文字行的任意字內斷開。該值適合包含一些非亞洲文字的亞洲文字。
語法：word-break : normal | break-all | keep-all
normal : 依照亞洲語言和非亞洲語言的文字規則，允許在字內換行
break-all : 該行為與亞洲語言的normal相同。也允許非亞洲語言文字行的任意字內斷開。該值適合包含一些非亞洲文字的亞洲文字
keep-all : 與所有非亞洲語言的normal相同。對於中文，韓文，日文，不允許字斷開。適合包含少量亞洲文字的非亞洲文字
word-wrap:break-word例子與上面一樣，但區別就是它會把congratulation整個單詞看成乙個整體，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷掉的。
支援版本：ie5.5以上 內容將在邊界內換行。如果需要，詞內換行( word-break )也將發生。**自動換行，避免撐開。
語法： word-wrap : normal | break-word
normal : 允許內容頂開指定的容器邊界
break-word : 內容將在邊界內換行。如果需要，詞內換行（word-break）也行發生說明：設定或檢索當當前行超過指定容器的邊界時是否斷開轉行。
一般情況下，元素擁有預設的
white-space:normal 自動換行
ps：不換行是white-space:nowrap
當錄入的文字超過定義的寬度後會自動換行，但當錄入的資料是一堆沒有空格的字元或字母或數字（常規資料應該不會有吧，但有些測試人員是會這樣子做的），超過容器寬度時就會把容器撐大，不換行。
解決方法（以ie，chrome,ff為測試瀏覽器）：
word-break:break-all; /*支援ie，chrome，ff不支援*/
word-wrap:break-word;/*支援ie，chrome，ff*/
text-overflow語法：
text-overflow : clip | ellipsis
clip : 不顯示省略標記（...），而是簡單的裁切
ellipsis: 當物件內文字溢位時顯示省略標記（...）
display:block;white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
css超出部分省略號
本文 如果實現單行文字的溢位顯示省略號同學們應該都知道用text overflow ellipsis屬性來，當然還需要加寬度width屬來相容部分瀏覽。p效果如下 你好 單行省略號測試，省略部分 p效果如下 你好 單行省略號測試，省.略部分呢,測測測測測測測測 試測試測試測試測試試試 因使用了web...
CSS超出部分省略號
1，單行文字實現超出部分省略號 overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行 2，多行文字實現超出部分省略號 overflow hidden text overflow ellipsi...
超出部分省略號
單行省略 overflow hidden text overflow ellipsis white space nowrap 多行省略 display webkit box webkit box orient vertical webkit line clamp 3 overflow hidden ...