HTML/CSSCSS文字折行知识大全

0

CSS文字折行知识大全

CSS换行 CSS不换行 CSS英文换行 CSS中文不换行 阅读:149 时间:2022年07月06日

是不是在用CSS做文字排版时,经常会遇到并搜索这些问题: CSS换行,CSS不换行,CSS英文换行,CSS中文不换行,CSS标点符号不换行... 本文会解决以上的全部问题困扰! 说大全属实有点吹牛皮了,不过确实很全面的集中了CSS中关于CJK与Non-CJK字符集...

前言

是不是在用CSS做文字排版时,经常会遇到并搜索这些问题:

CSS换行,CSS不换行,CSS英文换行,CSS中文不换行,CSS标点符号不换行...

本文会解决以上的全部问题困扰!

说大全属实有点吹牛皮了,不过确实很全面的集中了CSS中关于CJK与Non-CJK字符集的换行相关属性。并逐一进行了解释说明。也不用全记住,在需要时,打开本页面当字典查阅一下就可以了。

CSS文字折行

先来个MDN文档风格的简洁

  • word-break

  • overflow-wrap(word-wrap)

  • line-break

  • white-space

 

word-break

CSS 属性 word-break 指定了怎样在单词内断行

说明
normal 使用默认的断行规则
break-all 对于 Non-CJK文本,可在任意字符间断行
keep-all CJK 文本不断行。Non-CJK 文本表现同 normal
break-word 已废弃

 

overflow-wrap

CSS 属性 overflow-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时,为防止其溢出,浏览器是否允许这样的单词中断换行

注:word-wrap 属性原本属于微软的一个私有属性,在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。word-wrap 现在被当作 overflow-wrap 的“别名”。

说明
normal 行只能在正常的单词断点处中断。(例如两个单词之间的空格)
break-word 表示如果行内没有多余的地方容纳该单词到结尾,则那些正常的不能被分割的单词会被强制分割换行。

 

line-break

CSS 属性 line-break 可以用来处理如何断开带有标点符号的CJK文本的行

说明
auto 使用默认的断行规则分解文本
loose 使用尽可能松散的断行规则分解文本。一般用于短行的情况,如报纸
normal 使用最一般的断行规则分解文本
strict 使用最严格的断行原则分解文本
anywhere 在每个印刷字符单元的周围,都有一个自动换行的机会,包括任何标点符号或是保留的空白字符,或是单词之间

 

white-space

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

说明
normal 连续的空白符会被合并,换行符会被当作空白符来处理
nowrap 和 normal 一样,连续的空白符会被合并。但文本内的换行无效
pre 连续的空白符会被保留。在遇到换行符或者<br>元素,或者需要为了填充「行框盒子」时才会换行。
pre-line 连续的空白符会被合并。在遇到换行符或者<br>元素,或者需要为了填充「行框盒子」时会换行。
break-spaces 与 pre-wrap的行为相同,另外有如下方所列区别:

break-spaces

  • 任何保留的空白序列总是占用空间,包括在行尾。

  • 每个保留的空格字符后都存在换行机会,包括空格字符之间。

  • 这样保留的空间占用空间而不会挂起,从而影响盒子的固有尺寸(最小内容大小和最大内容大小)

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

 

- 换行符 空格和制表符 文字换行 行尾空格
normal 合并 合并 换行 删除
nowrap 合并 合并 不换行 删除
pre 保留 保留 不换行 保留
pre-wrap 保留 保留 换行 挂起
pre-line 保留 合并 换行 删除
break-spaces 保留 保留 换行 换行

 

 

CJK: 指中,日,韩文

 

发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^