word-wrap、word-break、white空间强制换行和不换行总结

强制换行和强制不换行使用的属性

我们一般使用三个 CSS 属性来控制换行-wrap：自动换行；断词；white室。这三个属性可以说是专门为文本换行而创建的。首先，我们需要知道这三个属性的用途：

自动换行语法：

自动换行：正常（默认）| Break-word

每个浏览器都可以识别参数

：

正常：允许内容超出指定的容器边界。

break-word：内容将突破界限。必要时会触发Word-break（注意：请区分清楚，word-break和break-word是不同的东西，一个是属性，另一个是参数）。

说明：

word-wrap 检查单词是否换行，并设置或获取当前行超出指定容器边界时是否换行。中文没有问题，英文句子也没有问题。但对于长英文字符串，它不起作用。

示例：

congratulation 一词属于一长串英语单词。自动换行：断词将整个单词视为一个整体。如果行尾不够宽，无法显示整个单词，它会自动将整个单词放在下一行。 ，而不截断单词，这就是它不适用于长文本字符串的原因。 word-wrap：默认为正常，英文单词不拆分。

结论：

作用范围仅为misc等标准块级元素。 th、td等表格元素被识别，但没有任何作用（如果是td，th加宽度自动换行在IE下可能有效，但从完全兼容和实用内存的角度来看，还是适用前面的结论）。

断字语法：

断字：正常（默认）|打破所有| keep-all

Firefox和Opera无法识别

参数：

normal：根据亚洲语言和非日语语言的文本规则，允许单词换行的亚洲语言。 Break-all：此行为与亚洲语言的正常行为相同。非亚洲语言文本行的任何单词内的中断也是允许的。该值适用于包含一些非亚洲文本的亚洲文本。 keep-all：与所有非亚洲语言的正常情况相同。对于中文、韩文和日文，不允许断词。适用于包含少量亚洲文本的非亚洲文本。

解释：

word-break：break-all，是一个断词。当单词达到限制时，下一个字母会自动移动到下一行。主要解决长英文字符串的问题（只是弥补了上面word-wrap:break-word对长文本字符串不起作用的缺陷）。

示例：

继续上面，congratulation这个词属于一长串英语单词，word-break:break-all会缩短这个单词，行尾会是类似conra（前端部分由congratulation设计），接下来是行为调整（conguatulation）的后端部分。 word-break：keep-all是指中文、日文、韩文的连续词。也就是说，如果只使用这个时态而不进行自动换行，中文就不会自动换行。 （英语句子正常。）

结论：

范围仅限于misc等标准块级元素。表元素如th 和 td 被识别但没有效果（在 Chrome 下测试 word-break:break-all 是有效的，但从完全兼容和实用内存的角度来看，之前的结论仍然适用）。 Firefox和Opera无法识别分词，更不用说在Firefox下th和td使用分词的效果了。

white空间语法：

white空间：正常（默认）|之前| nowrap

参数：

normal：默认。浏览器会忽略空白。 pre：浏览器将保留空格。它的行为类似于 HTML 中的预标记。 nowrap：文本不换行。文本在同一行继续，直到遇到 br 标记。

说明：

对于前置属性，会将HTML中的多个连续空格进行合并，然后为了防止合并（最常见的场合是指定代码文本缩进），会将其中的空格继续。它被保留，不需要我们添加额外的样式和标签来控制其缩进和换行。预标记的原理是一样的。默认有一个white-space:pre内部。对于nowrap属性来说，这是强制不换行的核心。通常，该属性用于强制不换行。 Firefox的div和td以及IE的div都没有问题。唯一的bug是IE的td有问题。如果td没有指定宽度，nowrap仍然有效。如果td有宽度并且文本中没有标点符号或空格（例如一长串中文文本），nowrap将不再起作用。有效的。解决办法是添加word-break:keep-all;来解决这个问题。

==强制换行概述==：

如果在div等标准块级元素中需要强制换行，最常见的解决方案是word-wrap:break-word；断字：打破所有；这种方法的缺点是，如果行尾恰好是一长串英文单词，单词就会以一种别扭的方式被撕开（而FF不识别断词，但不会把单词撕开） 。个人认为，如果你在这个div中放入大量看起来像URL的地址，那么使用这种解决方案是一个非常好的选择（注：由于FF不识别断词，所以不能保证URL单词会在每行末尾很好地中断，但这也是一个无用的选择）。如果您放置的不是一长串易碎的英语（例如 URL），而是一个英语句子，请使用 word-wrap:break-word;。对于自动换行：break-word；溢出：隐藏；我在网上看到据说可以兼容IE和FF，但是经过个人测试，似乎并没有什么特殊效果。当然，如果你有更好的解决方案，也可以留言加入讨论。这里也非常欢迎您提出意见。如果需要在td、th等表格元素中强制换行，个人推荐的方法是：首先给表格设置tablelayout:fix。基本上，设置这个属性后，基本的换行问题就可以解决了。可能会发生表中的 td 和 th 由于内容量的原因而竞争其他 td 和 th 的宽度。此时，如果仍然存在强制换行的问题，在td内部添加一个图层div，情况就会按照上面的方法解决。

==强制非线性换行概述==：

强制非线性换行的问题比较容易分析，如上面讨论的，使用white-space:nowrap，Firefox的div和td以及IE的div ，没有问题。唯一的bug是IE的td有问题。如果td没有指定宽度，nowrap仍然有效。如果td有宽度并且文本中没有标点符号或空格（例如一长串中文文本），nowrap将不再起作用。有效的。解决办法是添加word-break:keep-all;来解决这个问题。总而言之，更安全的方法是在文本和 td 之间再放一层 div，然后使用 nowrap，这样就不会强制换行。注意，此时文本过多会溢出容器的可能性很大，所以需要添加一个overflow:hidden来防止容器溢出，这样才能兼容不同的浏览器。总结了这么多，发现浏览器这几个属性之间的兼容性似乎还没有达到平衡。似乎没有一个完美的解决方案可以完全兼容不同的浏览器。我们能做的就是尽力而为。以保持跨浏览器的显示一致。如果你还是觉得需要兼容所有浏览器，那么最终的解决方案就是使用JS。在以后的文章中我会考虑用最少的 JS 成本来满足这个要求，但这超出了本文的范围。 。一般情况下，元素默认为white-space:normal（自动换行，PS：不换行就是white-space:nowrap）。当输入的文本超过定义的宽度时，它会自动换行。但是当输入的数据是很多没有空格的字符或字母或数字时（正常数据不应该有，但有些测试人员会这样做），当超过容器的宽度时，容器就会扩展，而不会出现空格。换行符。

解决方案（使用IE、chrome、FF作为测试浏览器）：

{
word-break:break-all; /*支持IE，chrome，FF不支持*/
word-wrap:break-word;/*支持IE，chrome，FF*/
}
复制代码

以下是两种方法的区别：

1. word-break:break-all 例如，如果 div 宽度为 200px，则内容将自动换行为 200px。如果行尾有一个长英文单词（congratulation等），它会缩短该单词并使其成为行尾conra（congratulation的前部），下一行将是tulation（conguatulation） ) ) 的后端部分。

2。 word-wrap:break-word 示例与上面相同，但不同之处在于它将整个单词 congratulation 视为一个整体。如果行尾不够宽，无法显示整个单词，它会自动放下整个单词。一行，不缩短单词。

3、

word-break:break-all 支持的版本：IE5 及更高版本 此行为与亚洲语言中的正常行为相同。非亚洲语言文本行的任何单词内的中断也是允许的。该值适用于包含一些非亚洲文本的亚洲文本。

word-wrap:break-word 支持版本：IE5.5 或更高版本 内容将在边界内换行。如有必要，也会发生断词。桌子会自动环绕以避免拉伸。

语法：分词：正常|打破所有| keep-all

参数： 正常：根据亚洲和非亚洲语言的文本规则允许单词换行​​

break-all：此行为与亚洲语言的正常情况相同。非亚洲语言文本行的任何单词内的中断也是允许的。该值适用于包含一些非亚洲文本的亚洲文本

keep-all：与所有非亚洲语言的正常值相同。对于中文、韩文和日文，不允许断词。适用于包含少量亚洲文本的非亚洲文本

语法：自动换行：正常 | break-word

参数： normal ：允许内容突破指定的容器边界

break-word ：内容将在边界内换行。如有必要，还会发生言语辱骂。描述：设置或获取当前行超出指定容器边界时是否断行。

建议：使用W3C检测分词会出现问题，这也会导致百度快照出现问题——该属性OPERA FIREFOX浏览器不支持分词属性。您可以使用 white-空间：正常；这样在FireFox和IE下都能正确换行，并且要注意单词之间不能用空格来替换，否则无法正确换行。

推荐兼容IE和FF的换行CSS样式

最好的方式是word-wrap:break-word；溢出：隐藏；而不是自动换行：break-word；断字：打破所有；也不是自动换行：断词； Overflow:auto;

作者：BothEyes1993
链接：https://juejin.im/post/5c09f592f265da616413d1e7
来源：掘金版权归作者所有。商业转载请联系作者获取授权。非商业转载请注明出处。