word-break在Web编程中,会遇到文字比较多的情况,这个时候就需要涉及到强制换行、不换行;在CSS中,提供了word-break、word-wrap、white-space等属性控制换行。下面介绍文字遇到边界时的一些处理方法及word-break、word-wrap、white-space的用法。

word-break

一、word-wrap

1、语法

word-wrap : normal | break-word

2、值的说明

(1)、normal:默认值,单词如果单词超长,会冲出边界(单个单词超长,在当前行显示)

(2)、break-word:将内容在边界内换行,当单词在当前行放不下时,会自动切换到下一行(单个单词超长,在下一行显示)

3、注意事项

只对英文起作用,以单词作为换行依据。

二、word-break

1、语法

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

2、值的说明

(1)、normal:默认值,到边界处的汉字换行,如果是英文整个单词换行,如果出现某个单词长度过长,则会撑破容器,如果边框为固定属性,则后面部分将无法显示;(单个单词长度超过容器长度)

(2)、break-all:可以强行截断英文单词,强行换行

(3)、keep-all:不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行,英文单词也整个换行,如果出现某个英文字符长度超过边界,则后面的部分将撑破容器,如果边框为固定属性,则后面部分无法显示

3、注意事项

word-break值为break-all时,只对英文起作用,以字母作为换行依据。

三、white-space

1、语法

white-space:normal | nowrap | pre-wrap | pre-line | inherit

2、值的说明

(1)、normal:为其默认值。空白符会被浏览器忽略,往往可以通过设置这个值恢复到默认值下

(2)、nowrap:文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止

(3)、pre-wrap:保留空白符,但是正常地进行换行。

(4)、pre-line:合并空白符,但是保留换行符。

(5)、inherit:从父元素继承white-space属性的值。

3、注意事项

(1)、white-space值为pre-wrap时,只对中文起作用,强制换行。

(2)、white-space值为inherit时,在所有的IE版本都不支持。