實現頁面的文字、字母的展示效果的時候，相信大家都會遇到過一些這樣的要求：“文字不能換行，要強制文字一行展示”或者是“字母不會自動換行，需要實現可以自動換行斷句”等等諸如此類的要求，現在就這個文字、字母換不換行的問題，說說這三個css屬性的巧妙運用：white-space、word-wrap、word-break

首先，先來看下這三個屬性在W3C上給出的釋義：（具體這三個屬性各自有哪些屬性值需要大家查詢下W3c這裡就不再贅述了）

（1）white-space：屬性設定如何處理元素的空白；

（2）word-wrap（css3的新增屬性）：允許長單詞或者url地址換行到下一行；

（3）word-break（css3的新增屬性）：規定自動換行的處理方法；

接下來，就是這幾個屬性的組合運用讓我們可以在處理文字和字母的換行問題上得心應手

（1）要求強制不換行：p{white-space:nowrap}

一般的運用：要求文字等不換行且超出範圍省略號顯示 p{width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}

（2）自動換行：p{white-space:normal(預設值)}

（3）特殊的，針對字母以及數字的換行問題：

p{word-break:break-all(表示按照單個字母去換行，不保證單詞的完整性);word-wrap:break-word;}

word-wrap:break-word;

注：此時需要把元素設定為塊級元素才能看得到效果