目录

  1. word-break
  2. word-wrap
  3. 实例对比

根据 W3C 的 CSS Text Module Level 3 文件来看，在网页中文本断行的规则通常是断在 软性断行机会点（Soft Wrap Oppportunity）。各种标点符号和空白通常都是一个断行机会点。这对英文来说很方便，因为英文中每个单字都会以空白分隔开。无论是断在空白或者标点符号，都不会影响一个单字被完整呈现。但是对于 CJK（中日韩）来说，每个字都是断行机会点。本期内容和大家一起学习CSS断行相关的属性 word-break、word-wrap。

word-break

该属性指定字母之间的“软性断行机会点”，何为软性断行机会点，即断行发生在断行机会点处。word-break 可取值为 normal | break-all | keep-all。只在 white-space属性值运行断行时生效。

  1. normal，不同字体根据下面自定义规则断行
    • CJK可以在任何一个CJK字体后断行；
    • non-CJK会在半角空格或者连字符(-)位置自动断行，不会在长单词的中间断行；
    • CJK中包含non-CJK:non-CJK部分按 non-CJK情况处理进行断行处理；
    • CJK中含有标点符号时，浏览器不会让标点符号位于一个行的行首，会使标点符号和前一个字符组成一个整体进行断行；
  2. break-all，在任意的软性断行机会点处断行
    • 允许词内断行
  3. keep-all，禁止词内断行
    • non-CJK与normal属性相同
    • IE浏览器中CJK在半空格、连接符或者任何标点符号处换行
    • Chrome & Safari不支持该属性(使用默认换行)
  4. break-word，非官方属性
    • 该属性只在支持 Webkit/Blink 为内核的浏览器支持，比如Chrome、Safari
    • 该属性效果和下面讲到的 word-wrap: break-word 相同

引用 W3C 文档中的例子：

Here’s a mixed-script sample text:

这是一些汉字, and some Latin, و کمی نوشتن عربی,
และตัวอย่างการเขียนภาษาไทย.
The break-points are determined as follows (indicated by ‘·’):

word-break: normal
这·是·一·些·汉·字,·and·some·Latin,·و·کمی·نوشتن·عربی,·
และ·ตัวอย่าง·การเขียน·ภาษาไทย.
word-break: break-all
这·是·一·些·汉·字,·a·n·d·s·o·m·e·L·a·t·i·n,·و·ﮐ·ﻤ·ﻰ·ﻧ·ﻮ·ﺷ·ﺘ·ﻦ·ﻋ·ﺮ·ﺑ·ﻰ,·
แ·ล·ะ·ตั·ว·อ·ย่·า·ง·ก·า·ร·เ·ขี·ย·น·ภ·า·ษ·า·ไ·ท·ย.
word-break: keep-all
这是一些汉字,·and·some·Latin,·و·کمی·نوشتن·عربی,·
แและ·ตัวอย่าง·การเขียน·ภาษาไทย.

word-wrap

该属性指定是否可以在单词内任意断开，以防止在另外不可破坏的字符串太长而不能放置在行框内而造成溢出。只在 white-space属性值运行断行时生效。支持所有浏览器。可取值为 normal | break-word。

  1. normal
    • 在半空格、连接符位置处断行；
  2. break-word
    • 如果行中没有其他可接受的断点，则一个不可破坏的“单词”可能会在任意点断开；

实例对比

1
2
3
4
5
6
7
8
9
10
11
<div class="box keepall">
自身都带有自动换行功能啊，AAAAAA BBBBBBBBBBBBB,CCCCCCCCC，的右端自动换行。
</div>
此例中注意keep-all在不同浏览器中的兼容，特殊符号处的换行！
<div class="box breakall">
自身都带有自动换行功能啊，AAAAAA BBBBBBBBBBBBB,CCCCCCCCC，的右端自动换行。
</div>
此例中注意逗号的位置!
<div class="box breakword">
自身都带有自动换行功能啊，AAAAAA BBBBBBBBBBBBB,CCCCCCCCC，的右端自动换行。
</div>
1
2
3
4
5
6
<style type="text/css">
    .box{width:100px;height:100px;border:2px solid #f00;color:#333;font:12px arial;margin-bottom:10px;}
    .keepall{word-break:keep-all;}
    .breakall{word-break:break-all;}
    .breakword{word-wrap:break-word;}
</style>

转载申请

本作品采用知识共享署名 4.0 国际许可协议进行许可，转载时请注明原文链接，文章内图片请保留全部内容。