一、word-wrap:同意对长的不可切割的单词进行切割并换行到下一行。(中英文处理效果一样)
word-wrap有两个取值:
1、word-wrap: normal:仅仅在同意的断字点换行(浏览器保持默认处理)。
2、word-wrap: break-word:在长单词或 URL 地址内部进行换行。(即在容器末端有长单词不能全然显示,不会截断单词,而是作为总体,自己主动换行)
>
>
>
>
>
>
div{
padding: 0;
0 auto;
200px;
100px;
1px solid red;
}
>
>
>
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
>
>
>
默认情况下:
加入样式:
word-wrap:break-word; //效果和上述一样
二、word-break:规定非中日韩文本的换行规则。
(对中文正常换行,对英文依照例如以下说明处理)
word-break有三个取值:
1、word-break: normal:使用浏览器默认的换行规则。
(等价于word-wrap: normal)
2、word-break: break-all:同意在单词内换行。(即在容器末端有长单词不能全然显示,会截断单词)
给div加入此规则
-all;
效果:对sit进行了截断处理
3、word-break: keep-all:仅仅能在半角空格或连字符处换行。
为了演示,在原文本的ipsum、dolor和sit之间增加一个连字符(-)
>
Lorem ipsum-dolor-sit amet, consectetur adipiscing elit.
>
效果:在ipsum后产生了换行
三、text-wrap:规定文本的换行规则。
text-wrap是CSS3属性,有4个取值:
1、text-wrap:normal:仅仅在同意的换行点进行换行。
2、text-wrap:none:不换行。
元素无法容纳的文本会溢出。
3、text-wrap:suppress:压缩元素中的换行。浏览器仅仅在行中没有其它有效换行点时进行换行。
4、text-wrap:unrestricted:在随意两个字符间换行。
PS:眼下主流浏览器都不支持 text-wrap 属性。
来源:http://www.ido321.com/621.html