深入研究CSS文本环绕

今天让我们来看看CSS中的文本环绕。一般情况下，定宽框中的汉字会自动换行。但是当遇到很长的英文单词或者很长的URL时，文本可能不会自动换行溢出容器。幸运的是，CSS为我们提供了一些与文本换行相关的属性；overflow-wrapword-breakwhite-spaceline-breakhyphens1。overflow-wrapoverflow-wrap用来说明当一个不能分开的字符串太长而无法填满它的换行框时，为了防止溢出，浏览器是否允许这样的词换行。它的属性值有以下三种类型：overflow-wrap:normal;溢出包装：任何地方；溢出包装：中断词；(1)normal的normal属性值会让浏览器使用系统默认的换行行为。因此，对于英语和其他相关的书写系统，换行符将出现在空格和连字符处。从图中可以看出，段落中有一个很长的词溢出了容器，这是系统默认的换行行为。(2)anywhere使用valueanywhere会在字符串之间的任意点中断，浏览器只有在其行上显示单词会导致溢出时才会中断该单词。如果这个词放在它的行上时仍然溢出，它会在溢出发生的地方断开这个词。如您所见，使用overflow-wrap:anywhere将溢出的单词分解为文本块，以便它们适合容器。此处文本所在的容器具有固定宽度。此属性会影响其所在元素的min-content属性的大小计算。很容易看出width设置为min-content:.break-word{width:min-content;overflow-wrap:break-word;}.anywhere{width:min-content;overflow-wrap:anywhere;}效果如下：可以看到，带有overflow-wrap:break-word的元素计算出来的min-content就像单词没有断，所以它的宽度就变成了最长单词的宽度.带有overflow-wrap:anywhere的元素，因为中断可以发生在任何地方，所以min-content最终成为单个字符的宽度。请注意，只有当文本所在容器的宽度设置为min-content时，此行为才会起作用。如果width设置为固定值，anywhere和break-word的表现是一致的。另外需要注意的是，目前部分浏览器还不支持该属性：(3)break-wordbreak-word属性是指如果行中没有多余的空间容纳单词到末尾，那些不能正常使用的单词besplit将被强制拆分和换行。如您所见，文本在长词的某处换行。如果放置文本的容器有固定的宽度，它会在长字溢出的地方换行。(4)浏览器兼容性overflow-wrap属性就是原来的word-wrap。word-wrap最初是没有前缀的Microsoft扩展。它不是CSS标准的一部分，尽管大多数浏览器使用名称word-wrap来实现它。根据CSS3规范草案，浏览器应将word-wrap视为overflow-wrap属性的旧名称别名，以确保兼容性。2.word-breakword-break属性用于指定如何在单词中换行。我们可以使用此属性在内容溢出的确切位置拆分单词并将其换行到下一行。以下是word-break的属性值：word-break:normal;分词：break-all；分词：保留所有；分词：分词；请注意，break-word的属性值已被丢弃，但由于遗留原因，浏览器仍然支持它。指定此属性与同时使用word-break:normal和overflow-wrap:anywhere具有相同的效果。先来看看前三个属性：(1)normal将word-break属性的值设置为normal会应用默认的换行规则：可以看到设置为normal时，word-break时的效果isnotsetis同样，这是浏览器的默认换行行为。(2)break-all当属性值为break-all时，对于非CJK（CJK指的是中文/日文/韩文）文本，任何字符都可以换行。如您所见，长词将溢出的文本的其余部分包裹起来。使用break-all将在英语和其他相关语言系统中发生溢出的确切位置断开两个字符之间的单词。但是，它不会对中文、日文和韩文文本应用相同的行为。因为CJK书写系统有自己的断点应用规则。(3)keep-all如果使用值keep-all，即使内容溢出，浏览器也不会对CJK文本进行分词。应用keep-all值与非CJK书写系统的正常效果相同。简而言之，像英文这样的CJK文本不会换行，而像中文这样的非CJK文本表现得和正常一样。(4)浏览器兼容性3.white-spacewhite-space属性用来设置如何处理元素中的空白。它的属性值如下：white-space:normal;空白：nowrap；空白：pre；空白：预包装；white-space:pre-line我们来看看这些属性值的作用。(1)nowrap当我们设置white-space的值为nowrap时，可以防止文本自动换行：可以看到，文本不换行，文本会继续在同一行，直到遇到标签.(2)pre当我们将white-space的值设置为pre时，文本之间的空格会被浏览器保留。它的行为类似于HTML中的标签。

更糟糕的是，无知还是冷漠？我不知道，也不在乎。

更糟糕的是，无知还是冷漠？我不知道，也不在乎。

更糟糕的是，无知还是冷漠？我不知道也不关心。

会设置font-family:monospace，这里重新设置*/font-family:inherit;}显示效果如下：(3)BrowserCompatibility4.line-breakline-break属性可以用来处理带有标点符号的中文、日文、韩文如何换行。总之，这个属性可以用来处理过长的标点符号。(1)anywhere可以使用line-break:anywhere来换行较长的标点符号：可以看到，overflow-wrap:break-word和line-break:anywhere可以保留容器中包含的内容，但是word-break:break-有长标点符号时全部溢出。(2)浏览器兼容性5.hyphenshyphens属性告诉浏览器在换行时如何使用连字符连接单词。可以完全阻止连字符的使用，控制浏览器何时使用它们，或者让浏览器决定何时使用它们。它的断字规则是由语言决定的，所以你需要告诉浏览器使用哪种语言。这是通过在HTML中指定lang属性来完成的：这只是一些任意文本来显示操作中的连字符。
(1)auto当连字符设置为auto时，浏览器是在适当的断字点自由自动断字：p{-webkit-hyphens:auto;/*forSafari*/hyphens:auto;}显示效果如下：(2)浏览器兼容性6.总结当文本所在容器的宽度固定时，可以使用overflow-wrap:break-word;和溢出包装：任何地方；实现文字自动换行；如果容器宽度为min-content，则只能使用overflow-wrap:break-word；实现文字环绕；溢出包装：中断词；也可用于包裹长标点符号。分词：break-all；可用于文字换行，但该属性不能换行较长的标点符号；空白：nowrap；可用于防止文本自动换行；line-break:任何地方都可以用长标点符号换行；连字符：自动；可用于连字符。参考：https://codersblock.com/blog/deep-dive-into-text-wrapping-and-word-breaking/https://blog.logrocket.com/guide-word-wrap-overflow-wrap-word-break-css/