CSS中的文本换行问题

一、出现问题的地方

我们看到这种情况一般会以下两个方面去考虑：

1.内容框的宽度问题

很明显比较外层的盒子是有宽度限制的，那么出现这样的情况是否是因为内层内容框的宽度大于了外层的宽度。

2. 文字溢出部分是连续无间断的字符串

我们知道对于有宽度限制的盒子，里面的中文文本是会自动换行的，英文文本会按语言规则换行，而连续的英文字符则不会换行。如下图所示

经检查，这里的问题一部分确实是由上述第二个原因引起的，但是还有一部分符合英文语言规则的并没有自动换行。

继续审查元素：

没毛病！看完内心毫无波澜。。。怎么可能。。。那么问题出在哪里？是浏览器的原因吗？

当前是Firefox，复制到chrome里试试

难道我错怪Firefox了吗？等等，下面的一堆 是什么鬼

回到Firefox中以编辑HTML的方式查看发现

问题终于出来了，就是 的问题。。。将其替换成空格后就自动换行了。

当然还剩下一堆连续字符不换行的问题，我们继续了解一下css中换行的设置

二、换行相关设置

white-space、word-break和word-wrap

2.1 white-space

设置如何处理元素内的空白

中文文本测试结果：

测试代码结构：

<div>
    <h4>white-space:normal</h4>
    盼望着，          盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
</div>

英文文本测试结果：

测试代码结构：

<div>
    <h4>white-space:normal</h4>
    I wonder,          and wonder,the east wind comes.The spring is coming.Everything is awoke.They open their eyes.The mountains green,the water become more.The sun's face gets red.
</div>

图中蓝框表示换行符引起的效果，红框表示空格引起的效果。

总结各参数的效果：

normal：默认值。空格不保留，文本会换行；不受换行符影响。

pre：空格会保留，文本不换行；受换行符影响

nowrap：空格不保留，文本不换行，遇<br>会强制换行；不受换行符影响。

pre-wrap：空格会保留，文本会换行；受换行符影响。

pre-line：空格不保留，文本会换行；受换行符影响。

inherit：从父元素继承。

2.2 word-break

规定自动换行的处理方法

中文文本测试结果：

测试代码结构：

<div>
    <h4>word-break:normal</h4>
    盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
</div>

英文文本测试结果：

测试代码结构：

<div>
    <h4>word-break:normal</h4>
    I wonder,and wonder,the east wind comes.The spring is coming.Everything is awoke.They open their eyes.The mountains green,the water become more.The sun's face gets red.
</div>

总结各参数的效果：

normal：默认中英文换行规则。

break-all：允许在单词内换行。对中文文本没什么影响，英文文本中单词会被拆分。

keep-all：只能在半角空格或连字符处换行。对英文文本没什么影响，中文文本受影响。

2.3 word-wrap

允许长单词或 URL 地址换行到下一行

测试结果：

normal：只在允许的断字点换行。

break-word：在长单词或 URL 地址内部进行换行。

在对英文文本的测试中，要注意所谓的“断字点”。

推测应该是空格，点号后面必须有空格才会被断句，不然将作为整体，这也是为什么“The”没有被换到下一行的原因

word-wrap 强调的是是否允许单词内断句，而word-break强调的则是怎么样来进行单词内的断句

三、补充

HTML提供了5种空格实体（space entity），它们拥有不同的宽度，非断行空格（ ）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（       ‌ ‍）在不同浏览器中宽度各异。

  ：不换行空格，全称No-Break Space，是按下space键产生的空格。在HTML中，如果用空格键产生此空格，空格是不会累加的（只算1个）。使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。

• ← 上一篇
• 下一篇 →