用于强制换行和强制不换行的属性
我们通常使用三个 CSS 属性来控制换行： word-wrap; 断词； 空白。 这三个属性可以说是专门为文本中断而创建的。 首先我们要知道这三个属性是用来做什么的：
自动换行句型：
自动换行：正常（默认）| 断词
所有浏览器都可以识别
范围：
正常：允许内容超出指定的容器边界。
Break-word：内容将超出边界。 必要时会触发Word-break（注意：请区分清楚word-break和break-word是不同的东西，一个是属性css强制不换行，另一个是参数）。
阐明：
word-wrap 是控制是否“为一个单词换行”，设置或获取当当前行超出指定容器的边界时是否换行。 中文没有问题，英文句子也没有问题。 但对于长英文字符串，它不起作用。
例子：
祝贺这个短语属于一长串中文。 word-wrap:break-word 将整个短语视为一个整体。 如果行尾不够长，无法显示整个短语，它会手动将整个短语放在下一行，而不截断该短语。 这种解释不适用于长文本字符串。 word-wrap:normal 是默认值，英文短语不会被反汇编。
综上所述：
作用范围只是div等标准的块级元素，th、td等表格元素实际上被识别，没有效果（如果是td、th加长度自动换行，IE下才能发挥效果） ，但基于完全兼容，方便记忆的角度，以上推论为准）。
断词句型：
断字：正常（默认）| 全部打破 | 保留全部
Firefox、Opera 无法识别
范围：
正常：根据欧洲和非欧洲语言的文本规则，单词内允许换行。 全部破坏：该行为与欧洲语言的正常行为相同。 还允许非欧洲语言文本行中的任意断字。 该值适用于包含一些非亚洲文本的欧洲文本。 keep-all：与所有非欧洲语言的正常情况相同。 对于英语、韩语和日语，不允许断词。 适用于带有少量欧洲文本的非亚洲文本。
阐明：
word-break：break-all，就是打断短语。 当短语到达边界时，下一个字母将手动移动到下一行。 主要解决英文长字符串的问题（只是填补了之前word-wrap:break-word对长字符串文本不起作用的缺陷）。
例子：
继续前面的短语congratulation，属于一长串英文，word-break:break-all会截断该短语，行尾会做成类似conra（congratulation的后端部分），下一行是tulation（conguatulation）的前端。 部分。 word-break：keep-all是指中文、日文、韩文的连续词。 也就是只有这个时候，没有自动换行，中文才不会换行。 （英语句子正常。）
综上所述：
作用范围仅适用于标准块级元素，例如 div。 th 和 td 等表元素实际上被识别并且没有任何作用。 即以上推论为准）。 Firefox和Opera都很难识别分词，更不用说在Firefox下的th和td中使用分词的疗效了。
空白句型：
空白：正常（默认）| 预| 诺拉普
范围：
正常：默认。 浏览器会忽略空白。 pre：浏览器将保留空白。 其行为类似于 HTML 中的 pre 标记。 nowrap：文本不会换行，文本将在同一行继续，直到遇到 br 标签。
阐明：
对于pre属性来说，其实就是将HTML中多个连续的空格进行合并，然后为了防止合并（最常用的场合是表示代码文本的缩进），将里面的空格不断地合并起来。保留，不需要我们减少额外的样式和选项卡来控制其缩进和换行。 pre标签的原理是一样的，内部默认有一个white-space: pre。 对于nowrap属性来说，这是强制不换行的核心。 通常，此属性用于强制不换行。 在Firefox的div和td中，以及在IE的div中，都没有问题。 唯一的缺陷是IE的td会出现问题。 如果td没有指定长度，nowrap将始终有效。 如果td有长度，并且文本中没有标点符号和空格（例如英文长文本），nowrap将不再高效。 解决办法是添加断字：keep-all； 来解决这个问题。
==强制换行总结==：
如果需要在标准块级元素（例如 div）中强制换行，最常见的解决方案是 word-wrap:break-word; 断字：打破所有； 这种方法的缺点是，如果行尾的宽度恰好是一长串英文短语，那么这个短语就会被撕成一种尴尬的格式（而且FF不识别分词，所以不会打开短语）。 我个人认为，如果你在这个div上放一长串类似URL的地址，那么使用这种方案是一个非常好的选择（注：由于FF不识别分词，所以不能保证URL会整齐地排列）每行末尾都断掉 短语，但这也是一种无奈的选择）。 如果不是像URL这样的可分解的长英文字符串，而是英文短语，则使用word-wrap:break-word;。 至于自动换行：break-word； 溢出：隐藏； 在网上看到，据说是兼容IE和FF，但是经过个人测试，虽然没有很有效的效果。 当然，如果你有更好的解决方案css强制不换行，也可以留言参与讨论。 这里也非常欢迎您提出意见。 如果需要对td、th等表格元素进行强制换行，个人推荐的形式是：首先为表格设置table-layout:fixed，基本上设置这个属性后就可以解决基本的换行问题了。 不会出现表中的td和th由于上面各项内容的量而抢占其他td和th的长度的情况。 这时候如果还存在强制换行的问题，那么在这个td里面加一层div，那么情况就按照上面讨论的形式解决了。
==总结强制无换行==：
强制不换行的问题比较容易分析。 如上所述，使用white-space:nowrap，Firefox的div和td，IE的div都没有问题。 唯一的缺陷是IE的td会出现问题。 如果td没有指定长度，nowrap将始终有效。 如果td有长度，并且文本中没有标点符号和空格（例如英文长文本），nowrap将不再高效。 解决办法是添加断字：keep-all； 来解决这个问题。 总结一下，比较稳定的形式就是在text和td之间再放一层div，然后用nowrap，那么就强制不换行了。 注意，这时候很有可能文本太多会溢出容器，所以要加上overflow:hidden来防止容器溢出，这样才能兼容各种浏览器。 总结了这么多，我发现虽然只是浏览器上那些属性的各种兼容性的一个平衡，虽然目前还没有一个完美的解决方案可以完全兼容所有的浏览器，但是我们最多能做的就是尝试我们的最好的。 可以保持跨浏览器的显示一致。 如果你仍然认为必须兼容所有浏览器，那么最终的解决方案就是使用 JS。 在以后的文章中，我会考虑用最小的 JS 成本来满足这个需求，但这不在本文的讨论范围之内。 。 一般情况下，元素默认有white-space:normal（自动换行，PS：不换行就是white-space:nowrap），当输入的文本超过定义的长度时，会手动换行，但是当输入data 是一堆不带空格的字符或字母或数字（应该没有正规数据，但有些测试人员会这么做），超过容器长度且不换行时容器就会扩展。
解决方案（使用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。 如果行尾有较长的英文短语（恭喜等），则会将该短语截断成为行尾，如Conra（恭喜的后端部分），下一行是前面- 结语的结束部分（conguatulation）。
2. word-wrap:break-word 的例子和之前一样，不同的是它会把整个祝贺词看成一个整体。 如果行尾不够长，无法显示整个短语，它会手动将整个短语放在下一行，而不是短语被截断。
3.
word-break:break-all 支持的版本：IE5以上，行为与欧洲语言中的正常行为相同。 还允许非欧洲语言文本行中的任意断字。 该值适用于包含一些非亚洲文本的欧洲文本。
word-wrap:break-word 支持的版本：IE5.5及以上内容将在边界内换行。 如有必要，也会发生断词。 桌子被手工包裹以避免打开。
语法：断字：正常| 全部打破 | 保留全部
参数： normal ：根据欧洲和非欧洲语言的文本规则，单词内允许换行
Break-all ：行为与欧洲语言的正常行为相同。 还允许非欧洲语言文本行中的任意断字。此值适用于包含一些非亚洲文本的欧洲文本
keep-all ：与所有非欧洲语言的正常情况相同。 对于英语、韩语和日语，不允许断词。适用于带有少量欧洲文本的非亚洲文本
语法：自动换行：正常 | 断词
参数： normal ：允许内容推出指定容器边界
Break-word ：内容将超出边界。 如有必要，还会发生断词。 描述：设置或获取当前行超出指定容器边界时是否断行。
建议：W3C 对分词的检查会显示问题，这会导致百度快照出现问题 - OPERA FIREFOX 浏览器不支持此属性。 word-break属性可以用white-space代替：normal； 就能正确换行，需要注意的是单词之间不能用空格来替换，否则无法正确换行。
兼容IE和FF的换行CSS推荐样式
最好的形式是 word-wrap:break-word; 溢出：隐藏； 不自动换行：断字； 断字：打破所有； 也不是自动换行：断词； 溢出：自动；
发表评论