与纸张不同,网页几乎可以无限地横向延伸 。 令人印象深刻的是,这并不是我们阅读时真正需要的东西。 浏览器根据文本容器的宽度和屏幕的宽度来包装文本,以便我们可以看到所有文本而不必向侧面滚动太多(仅向下滚动)。
除了包装外,浏览器还负责这些空间 。 它们将源代码中的多个连续空格合并到渲染页面上的一个空格中,并且在开始处理包装之前它们还注册了强制换行符。
何时更改默认文字换行
太好了,非常感谢。 但是,我们很容易在默认浏览器行为不是我们想要的情况下结束。 它可以是不应该 换行的标题, 也可以是段落中的单词比下一行更好 ,但最好在行末尾留一个看上去很奇怪的空白。
也可能发生了,我们非常需要文本中保留的那些空间 ,但是浏览器不断将它们合并为一个,从而迫使我们添加多个
在源代码中。
包装首选项也可能随文本的语言和目的而变化 。 普通话和法国诗歌不一定需要用完全相同的方式包装。
有很多CSS属性(和HTML元素!)可以控制换行和断点 ,还可以定义在换行之前如何处理空格和换行符 。
软包装机会和软包装休息
浏览器根据单词边界,连字符,音节,标点符号,空格等来决定将溢出的文本包装在何处。 这些地方都称为换行机会 ,当浏览器确实在一个这样的地方中断文本时,该中断称为换行中断 。
可以使用旧的<br>
元素来完成强制额外中断的最简单方法。
空格
如果您熟悉white-space
CSS属性,那么我敢打赌,您首先会以与其他许多属性相同的方式来了解它。 在寻找一种防止文字换行的方法时 。 white-space
的nowrap
值正是这样做的。
但是, white-space
属性不仅仅是包装。 首先,什么是空白? 这是一组空格字符 。 集合中的每个空间在长度,方向或两者上都互不相同。
一个典型的单个水平空格字符是我们通过按空格键添加的字符 。 Tab键也添加了类似的空间,但是长度更大 。 Enter键添加一个垂直空格以开始新行,并且
HTML中HTML在网页中添加了一个牢不可破的空间 。 像这样,有很多类型的空间构成“空白”。
正如我在开始时提到的,浏览器将源中的多个空间 (水平和垂直) 折叠为一个空间。 当需要换行时,他们还考虑使用这些空格字符来换行 (可以换行的地方)。
而且,正是这些浏览器操作我们可以使用white-space
控制。 请注意, white-space
属性不会影响所有类型的空间, 只会影响最常见的空间,例如规则的水平单个空格,制表符空间和换行符。
在下面,您可以看到示例文本的屏幕截图,该示例文本由浏览器包装以适合其容器 。 溢出发生在容器的底部,并且溢出的文本具有不同的颜色。 您会注意到代码中连续空格的折叠 。
<div class='textContainer'>
��? Hello. ��? Hello. ��? Hello
��? Hello.
��? Hello. ��? Hello. ��? Hello. ��? Hello.
��? Hello. ��? Hello. ��? Hello. ��? Hello.
��? Hello. ��? Hello. ��? Hello. ��? Hello. ��? Hello.
��? Hello. ��? Hello. ��? Hello. ��? Hello. ��? Hello.
��? Hello. ��? Hello. ��? Hello.
��? Hello. ��? Hello.
</div>
.textContainer {
width: 500px;
height: 320px;
}
![默认情况下,文本换行浏览器行为](https://i-blog.csdnimg.cn/blog_migrate/b190c467328a3ad3cef53ea4cc688838.png)
应用white-space: nowrap;
规则,文本的换行以以下方式更改:
.textContainer {
/* ... */
white-space: nowrap;
}
![使用空白nowrap进行文字换行](https://i-blog.csdnimg.cn/blog_migrate/4a79fe90025456e5de82eb2f133f7392.png)
该pre
值white-space
保留了所有的空格 ,并防止文本换行 :
.textContainer {
/* ... */
white-space: pre;
}
![带有预空格的文本换行](https://i-blog.csdnimg.cn/blog_migrate/2b41c1173e2d00856d7c82a2b7c8e644.png)
在pre-wrap
的价值white-space
保留了所有的空格和换行文字 :
.textContainer {
/* ... */
white-space: pre-wrap;
}
![使用空格预换行的文字换行](https://i-blog.csdnimg.cn/blog_migrate/fce75f1f15caa0fa89448bd0a7be64ca.png)
最后, pre-line
的值white-space
保留垂直空格如新线和环绕文字 :
.textContainer {
/* ... */
white-space: pre-line;
}
![带有空白行的文本换行](https://i-blog.csdnimg.cn/blog_migrate/7061a1db8d8d47c19f080bc2be7a5810.png)
断字
您应该知道的另一个控制文本换行的重要CSS属性是word-break
。 您可以在上面的所有屏幕截图中看到,浏览器在右侧的单词“ hello”之前包裹了该文本 ,超出此范围文本就会溢出 。 浏览器没听错 。
但是,如果必须 允许将单词中的字母打断 以 使文本甚至在右侧看起来,您都需要对word-break
属性使用break-all
值:
.textContainer {
/* ... */
word-break: break-all;
}
![断断续续](https://i-blog.csdnimg.cn/blog_migrate/6bc85396312b1384b0a2731897b177d1.png)
除break-all
和normal
(属于默认换行符)之外, word-break
属性还有第三个值。 keep-all
值不允许断字 。
您可能看不到英语keep-all
的效果。 但是,在单词中的字母本身就是有意义的单位的语言中,浏览器在换行时可能会破坏单词,因此可以使用keep-all
来防止这种情况。
例如, 朝鲜语单词中的字母最初是为了包装而折断的, 但在 white-space: keep-all;
保持在一起 white-space: keep-all;
指定了规则。
<div class='textContainer'>ìÂ??¸ê³Â??를 ÃÂ??Â¥ÃÂ??Â?? ëÂ??Â??ÃÂ??Â??, ìÂ?? ëÂ??Â??ì½Â??ëÂ??Â??ë¡Â?? ÃÂ??Â??ìÂ??ÂìÂ??Â??ìÂ??¤. ì Â??10ÃÂ??Â?? ìÂ?? ëÂ??Â??ì½Â??ëÂ??Â?? êµÂì Â?? ÃÂ??Â??ìÂ??Â??ê°Â?? 1997ëÂ??Â?? 3ìÂ??Â?? 10ìÂ??¼ë¶Â??ÃÂ??° 12ìÂ??¼ê¹Â??ì§Â?? ëÂ??Â??ìÂ??¼ìÂ??Â?? ë§Â??ìÂ??¸ì¦Â??ìÂ??Â??ìÂ??Â?? ìÂ??´ë¦½ëÂ??Â??ëÂ??¤. ì§Â??ê¸Â?? ëÂ??±ë¡Â??ÃÂ??Â??ìÂ??ÂìÂ??Â??ìÂ??¤. ìÂ??´ ÃÂ??Â??ìÂ??Â??ìÂ??Â??ìÂ??Â??ëÂ??Â?? ìÂ??Â??ê³Â?? ì Â??ë°Â??ìÂ??Â?? ì Â??문ê°Â??ëÂ??¤ìÂ??´ ÃÂ??¨ê»Â?? 모ìÂ??¬ ëÂ??¤ìÂ??Â??ê³¼ ê°Â??ìÂ??Â?? ë¶Â??ìÂ??¼ë¥¼ ëÂ??¤ë£¹ëÂ??Â??ëÂ??¤.</div>
.textContainer {
/* ... */
word-break: keep-all;
}
![断断续续](https://i-blog.csdnimg.cn/blog_migrate/c665b13dfc4d7307c98d816102b81e6b.png)
此属性将来可能支持另一个称为break-word
值。 稍后,在本文的“溢出包装”部分中,您将了解break-word
工作原理。
分词机会
开发人员还可以使用<wbr>
HTML元素在单词内添加换行机会 。 如果浏览器需要包装文本字符串,它将考虑出现<wbr>
位置以提供包装机会。
<div class='textContainer'>
��? Hello. ��? Hello. ��? H<wbr>ello
��? Hello.
��? Hello. ��? Hello. ��? Hello. ��? Hello.
��? Hello. ��? Hello. ��? Hello. ��? Hello.
��? Hello. ��? Hello. ��? Hello. ��? Hello. ��? Hello.
��? Hello. ��? Hello. ��? Hello. ��? Hello. ��? Hello.
��? Hello. ��? Hello. ��? Hello.
��? Hello. ��? Hello.
</div>
.textContainer {
/* ... */
white-space: pre-wrap;
}
![用wbr HTML标签换行](https://i-blog.csdnimg.cn/blog_migrate/3125ee039d1b688aec5c122c54198a33.png)
如果没有<wbr>
,整个“ Hello”一词将被换行。 通过将<wbr>
添加到HTML代码中,我们通知浏览器可以在需要时自动打包该单词 。
连字号
hyphens
CSS属性是控制单词中字母之间的分隔符的另一种方法 。 如果您有兴趣,我们将另外发表一篇有关CSS连字的文章 。 简而言之,该属性允许您通过连字符创建包装机会 。
它的auto
值会提示浏览器在换行时在需要的地方自动断字和断词 。 manual
值会强制浏览器在需要时包装我们添加的连字符机会 ,例如连字符(&hyphen;)或­
(软连字符)。 如果none
给出值, 连字符附近将不会进行换行 。
<div class='textContainer'>
bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse
bluehouse bluehouse bluehouse bluehouse bluehouse
</div>
.textContainer {
/* ... */
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
![带自动值的连字符](https://i-blog.csdnimg.cn/blog_migrate/079d2c35955b73dc31bc360bfa89be27.png)
溢出包装
该overflow-wrap
CSS属性控制在一个浏览器可能会断词 (或保留空间,在不久的将来可能发生的支持,其中) 溢出 。 如果为overflow-wrap
提供了break-word
值,则在该行中没有其他软包装机会的情况下,该字将被中断 。
请注意, overflow-wrap
也称为word-wrap
(它们是别名)。
<div class='textContainer'>
bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse
</div>
.textContainer {
/* ... */
overflow-wrap: break-word;
}
![带断字值的溢出包装](https://i-blog.csdnimg.cn/blog_migrate/c5f9c38d1d858cec4f77a7c1bb3d14ad.png)
上面HTML代码中的字母之间没有空格(即没有换行的机会),因此文本最初并没有被换行,而是保留为一个单词 。
但是,当允许通过断词来包装文本(即,将break-word
值提供给overflow-wrap
)时, 通过在需要的地方断开整个字符串来进行包装 。
翻译自: https://www.hongkiat.com/blog/change-default-text-wrapping-html-css/