word-wrap:normal | break-word; (內容換行)
- normal:默認的屬性值（允許內容頂開指定的容器邊界）
- break-word:內容將在邊界內換行（不截斷英文單詞換行丧叽，截斷英文單詞下面的屬性才具備這個功能）
word-break:normal | break-all | keep-all (詞內換行)
- normal:如果是中文則到邊界處的漢字換行,如果是英文整個詞換行,注意:如果出現(xiàn)某個英文字符串長度超過邊界,則后面的部分將撐開邊框,如果邊框為固定屬性,則后面部分將無法顯示妙黍。
- break-all : 強行換行,將截斷英文單詞扶歪。
- keep-all : 不允許字斷開。如果是中文汉规，將把前后標點符號內的一個漢字短語整個換行，英文單詞也整個換行，注意：如果出現(xiàn)某個英文字符串長度超過邊界，則后面的部分將撐開邊框,如果邊框為固定屬性被啼，則后面部分將無法顯示。
參數：
normal : 依照亞洲語言和非亞洲語言的文本規(guī)則棠枉，允許在字內換行
break-all : 該行為與亞洲語言的normal相同浓体。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本
keep-all : 與所有非亞洲語言的normal相同辈讶。對于中文命浴，韓文，日文贱除，不允許字斷開生闲。適合包含少量亞洲文本的非亞洲文本。
說明：
設置或檢索對象內文本的字內換行行為月幌。尤其在出現(xiàn)多種語言時碍讯。對于中文，應該使用break-all 扯躺。對應的腳本特性為wordBreak捉兴。
text-overflow:clip | ellipsis (文本溢出)
- clip : 不顯示省略標記（...）蝎困，而是簡單的裁切
- ellipsis : 當對象內文本溢出時（超過width部分）顯示省略標記（...）
white-space: normal | pre | nowrap (內容不換行)
- normal 默認”渡叮空白會被瀏覽器忽略难衰。
- pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的pre 標簽逗栽。
- nowrap 文本不會換行，文本會在在同一行上繼續(xù)失暂，直到遇到
標簽為止彼宠。（層中放一個表格，如果層的float：none 則表格和層間會有空隙弟塞，這種問題的解決辦法是在層的style里面加上white-space: nowrap）
例子：
讓文本單行顯示凭峡，并在溢出時，顯示省略標記：
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
生成效果如下：
圖0.png
另一個騰訊NBA官網的例子（看NBA視頻無意間發(fā)現(xiàn)的...）
圖1.jpg
在這里决记，騰訊用了上述的三個屬性
white-space: nowrap;
word-break: keep-all;
overflow: hidden;
這里的文本只能單行顯示摧冀，多余的文本將被截斷。其實word-break:keep-all這行在這里是多余的系宫，它的作用是控制所有字不能斷開索昂，但在后面加上overflow:hidden后依然會截斷超出盒子寬度的文字。
我把其中一行文本替換為一段英文扩借，可以發(fā)現(xiàn)英文單詞依然被直接截斷椒惨。
圖2.png
