浏览器文本换行及换行规则的CSS设置

最新推荐文章于 2025-04-03 18:32:15 发布

GandoraMask

最新推荐文章于 2025-04-03 18:32:15 发布

阅读量2.8k

点赞数 10

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_36208612/article/details/125722175

版权

本文探讨了浏览器的自动换行规则，包括非CJK和CJK文本的换行处理，以及标点符号的影响。通过CSS的white-space、word-break和overflow-wrap属性可以调整文本的换行行为。white-space用于设置空白处理，word-break指定单词内部的断行规则，而overflow-wrap则用于处理长单词无法适应容器时的换行策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器自带的自动换行
各浏览器自身都带有自动换行功能，当浏览器显示文本的时候会让文本在浏览器或者div元素的右端自动换行。换行情况如下：
1.non-CJK：会在半角空格或者连字符(-)位置自动换行，不会在长单词的中间换行
2.CJK(中日韩)：可以在任何一个CJK字体后换行
3.CJK中包含non-CJK:non-CJK部分按 non-CJK情况处理进行换行处理
4.CJK中含有标点符号时，浏览器不会让标点符号位于一个行的行首，会使标点符号和前一个字符组成一个整体进行换行。
从上面可知，如果文本中存在换行符或者空格，文本在允许换行的时候会自动换行。
想让文本不换行展示需要通过css设置使得换行符不生效或者无视默认换行规则。一般通过设置
white-sapce:nowrap;来保证文本不换行展示,需注意的是white-space是一个可继承的css属性(参考文档：1)。在多行展示文本换行时一般通过设置word-break，或者overflow-wrap的值来决定文本内word在换行时的展示样式。

<html>
<body style="border: 1px solid #ccc;width:300px;">

<p style="word-break:keep-all;">non-CJK: test word asgdjagshdgajhsdhjasdjashjhagsd</p>
<p>non-CJK: test                word asgdjagshdgaj-hsdhjasdjashjhagsd</p>
<p>CJK(中日韩): 中日韩文本中日韩文本中日韩文本中日韩文本中日韩文本中日韩文本</p>
<p>CJK(中日韩)换行: 中日韩文本中日韩中日，韩文本中日韩文本中日本中日韩文本</p>
<p>CJK(中日韩): 中日韩文本中日韩文本中日.,韩文本中日韩文本中日韩文本中日韩文本</p>
<p>CJK(中日韩)换行: 中日韩文本中日韩中日.,韩文本中日韩文本中日韩文本中文本</p>
<p>CJK(中日韩)换行: 中日韩文本中日韩中日..,韩文本中日韩文本中日韩文本中文本</p>

<p>CJK(中日韩): 中日韩文本中日韩文本中日i.,韩文本中日韩文本中日韩文本中日韩文本</p>
<p>CJK中包含non-CJK: 测试CJK语言带有non-CJK文本gdjagshdga-jhsdhjasdjashjhagsd</p>
</body>
</html>

[图片]
CSS属性：white-space、word-break、overflow-wrap

white-space
white-space CSS 属性是用来设置如何处理元素中的空白 (en-US)。

Value	Description
normal	连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「块级元素 (line boxes)」时是必要。
nowrap	和 normal 一样，连续的空白符会被合并。但文本内的换行无效。
pre	连续的空白符会被保留。在遇到换行符或者元素时才会换行。
pre-wrap	连续的空白符会被保留。在遇到换行符或者元素，或者需要为了填充「块级元素 (line boxes)」时才会换行。
pre-line	连续的空白符会被合并。在遇到换行符或者元素，或者需要为了填充「块级元素 (line boxes)」时会换行
break-spaces	与 pre-wrap的行为相同，除了：

- 任何保留的空白序列总是占用空间，包括在行尾。
- 每个保留的空格字符后都存在换行机会，包括空格字符之间。
- 这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小

|–|–|

下面的表格总结了各种 white-space 值的行为:

	换行符	空格和制表符	文字换行	行尾空格
normal
合并
合并
换行
删除
nowrap
合并
合并
不换行
删除
pre
保留
保留
不换行
保留
pre-wrap
保留
保留
换行
挂起
pre-line
保留
合并
换行
删除
break-spaces
保留
保留
换行
换行
挂起：有空间占位，但是不可见，能触发鼠标事件，hover样式会生效，但是background对站位不会生效

<html>
<body style="border: 1px solid #ccc;width:300px;">
<p style="white-space:normal">normal: My first paragraph.My first paragraph.My first paragraph.
</p>
<p style="white-space:nowrap">nowrap: My first paragraph.My first paragraph.My first paragraph.
</p>
<p style="white-space:pre">pre:  pre 空格保留，<code>&lt;br&gt;</code>触发换行 My       -fi-rst paragr<br>aph.My first paragraph.
</p>
<p style="white-space:pre">pre: pre 空格保留，换行符触发换行.My       -fi-rst paragr
aph.My first paragraph.
</p>
<p style="white-space:pre-wrap">pre-wrap: 空格保留，会触发换行.My       first paragraph.My first paragraph.                                                   </p>

<p style="white-space:pre-wrap;cursor:pointer;background:#fffccc">pre-wrap挂起样式: My first paragraph.My first paragraph.My first paragraph.                                                          
asdasdasd
</p>
<p style="white-space:pre-line">pre-line: 空白符合并，换行符不合并   first paragraph

.空白符合并，换行符不合并.
</p>
<p style="white-space:break-spaces;cursor:pointer;background:#fffccc">break-spaces: My     first paragraph.My                            first paragraph.My first paragraph.                                                        
</p>
</body>
</html>

[图片]

word-break
word-break 指定了怎样在单词内断行
Value
Description
normal
使用默认的断行规则。
break-all
对于 non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。
keep-all
CJK 文本不断行。Non-CJK 文本表现同 normal。
break-word
他的效果是word-break: normal 和 overflow-wrap: anywhere 的合，不论 overflow-wrap的值是多少。
overflow-wrap
overflow-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行
Value
Description
normal
行只能在正常的单词断点处中断。（例如两个单词之间的空格）。
break-word
表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。
anywhere
如果该行中没有其他可接受的断点，则可以在任意点破坏其他不可破坏的字符序列。详细说明看参考文档3、4

<html>
<body style="border: 1px solid #ccc;width:200px;height:400px;">

<p style="overflow-wrap:normal;">Most words are short &amp; don't need to break. But <b  style="overflow-wrap: normal;">Antidisestablishmentarianism</b> is long. The width is set to min-content, with a max-width of 11em.
</p>
<p style="overflow-wrap:break-word;">Most words are short &amp; don't need to break. But <b  style="overflow-wrap: anywhere;">Antidisestablishmentarianism</b> is long. The width is set to min-content, with a max-width of 11em.
</p>
<p style="max-width:100px;border: 1px solid #ccc;height:200px;">Most words are short &amp; don't need to break. But <b>Antidisestablishmentarianism</b> is long. The width is set to min-content, with a max-width of 11em.
</p>

</body>
</html>