css3文本换行

word-wrap 属性

在css3中，使用word-wrap属性实现长单词与url地址的自动换行。

1. word-wrap 的语法及参数
word-wrap使用方法很简单，其基本语法如下：

word-wrap: normal | break-word

word-wrap 的属性可以使用以下值：

• normal：默认值，浏览器只在半角空格或连字符的地方进行换行。
• break-word：将内容在边界内换行（不截断英文单词换行）。

2. word-wrap 的使用方法
在实际应用中，有三种情况出现：全是中文、中英文混排、全是英文。
针对上面所说的情况，创建一个实例。
在没有显示设置word-wrap属性情况下，浏览器取默认值normal，此时效果：

Paste_Image.png

当word-wrap设置为break-word后的效果发生了变化：

Paste_Image.png

word-break 属性

在css3中通过word-break属性来决定自动换行的处理方法。通过具体的属性设置，不仅仅可以让浏览器实现半角空格或连字符后面的换行，而且还可以让浏览器实现任意位置的换行。

**1. word-break 的语法及参数
word-break的语法和word-wrap的语法类似，也很简单。

word-break: normal | break-all | keep-all

word-break属性用于设置或检索对象内文本的字内换行行为，在出现多种语言的情况下尤为有用。其取值简单的说明如下：

• normal：默认值，根据语言自己的规则确定换行方式，中文到边界上的汉字换行，英文从整个单词换行。
• break-all：可以强行截断英文单词，达到词内换行效果。
• keep-all：不允许字断开。如果是中文把前后标点符号内的一个汉字短语整个换行，英文单词整个换行；如果边框为固定属性，则后面部分无法显示。