1、word-wrap
設置為break-word時，文本中的長單詞或url可以換行
<p style="width:100px;word-wrap:break-word;border:1px solid red">換行換行換行換行換行換行換行換行aaaaaaaaaaaaaaaa</p>
添加換行后的效果
若css不設置word-wrap，遇到長單詞時內容溢出，效果如圖所示
2、word-break
設置為break-all時，文本遇到長單詞，會選擇在合適的位置截斷進行換行
<p style="width:100px;word-break:break-all;border:1px solid red">換行換行換行換行換行換行換行換行aaaaaaaaaaaaaaaa</p>
效果圖如下
3、white-space
設置為nowrap后文本內容不換行
<p style="width:100px;white-space:nowrap;border:1px solid red">不換行不換行不換行不換行不換行不換行不換行不換行</p>
效果圖如下，文字超出元素邊框，不換行
若文本中出現空白時，需要保留則設置為pre
該屬性設置為pre-line和pre-wrap后，文本會換行，但是pre-line不保留空白，pre-wrap保留空白