煦涵说CSS文本断行

内容简介：煦涵说CSS文本断行

根据 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 文档中的例子：

word-wrap

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

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

实例对比

<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>

<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>

感谢您的阅读

–eof–

作者[煦涵]

2017年06月18日

下面是「FED实验室」的微信公众号二维码，欢迎扫描关注：

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。