word-break、word-wrap、white-space的用法

word-break、word-wrap、white-space的用法

一、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版本都不支持。