word-wrap:允许长单词或 URL 地址换行到下一行
word-wrap: normal|break-word;
text-wrap: 规定文本的换行(折行)规则。目前主流浏览器都不支持
text-wrap: normal|none|unrestricted|suppress;
word-break :规定自动换行的处理方法
word-break: normal|break-all(允许在单词内换行)|keep-all(只能在半角空格或连字符处换行);
word-spacing:增加或减少单词间的空白,定义元素中字之间插入多少空白符。如果指定为长度值,会调整字之间的通常间隔;所以,normal 就等同于设置为 0。允许指定负长度值,这会让字之间挤得更紧。
word-spacing:normal|length;
white-space:设置如何处理元素内的空白
white-space:normal | pre | nowrap| pre-wrap| pre-line ;
测试代码如下:
<div style="word-wrap: normal;width:5px">hbellloojfjd</div>
<div style="word-wrap: break-word;width:5px">hbel lloojf jd</div>
<div style="word-wrap: normal;width:5px">hbel lloojf jdf</div>
<div style="word-wrap: break-word ;width:5px">hbellloojfjdf</div>
<br/>
<div style="word-break:normal;width:5px">hbellloojfjdf</div>
<div style="word-break: normal;width:5px">hbel lloojf jdf </div>
<div style="word-break:break-all;width:5px">hbellloojfjdf</div>
<div style="word-break: break-all;width:5px">hbel lloojf jdf</div>
<br/>
<div style="word-spacing: normal;width:150px">hbelll oojfjdf</div>
<div style="word-spacing:5px;width:150px">hbelll oojfjdf</div>
结果: