浅谈 white-space, word-wrap, word-break,强制换行的区别

一、White-space

      white-space ,规定如何处理元素中的空白和遇到边界如何换行。属于 CSS1 ,兼容性好,所有浏览器都支持。

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

            normal: 默认。合并空白符。多个空格和换行合并为一个空格。中文或单词遇到空格会自动换行,没有空格直接超出边界。

            pre: 保留空白符,类似

标签。内容过长将会超出边界。

            nowrap: 合并空白符。文本不会换行,直到遇到
标签。

            pre-wrap: 保留空白符,遇到边界自动换行。

            pre-line: 合并空白符,遇到边界自动换行。

            inherit : 从父元素继承。

二、Word-wrap

      word-wrap ,允许对长的不可分割的单词进行分割并换行。属于CSS3 ,所有主流浏览器支持。

            都是合并空白符。

      word-wrap: normal | break-word ;

            normal: 默认。遇到中文、整个的单词结束会换行。乱打的字母和数字不会换行,直接超出边界。存在这种行为的关键在于它识别了空格。

            break-word: 在长单词或 URL 地址内部进行换行。遇到边界就进行换行。

三、Word-break

      word-break,规定非中日韩文本的换行规则。属于CSS3 ,所有主流浏览器支持。

            都是合并空白符。

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

            normal: 默认。使用浏览器默认的换行规则。

            break-all: 允许在单词内换行。遇到边界单词会被切断。

            keep-all: 只能在半角空格或连字符处换行。









你可能感兴趣的:(HTML,CSS)