Skip to main content

和文本有关的CSS属性

text-overflow

text-overflow,指定如何处理行内溢出容器元素的文本。

需要注意的是text-overflow并不会强制文本溢出容器,需要设置overflowwhite-space属性才能做到约束文本溢出,例如:

overflow: hidden;
white-space: nowrap;

clip

text-overflow:clip是初始值,·clip本身是修剪的意思,也就是正常换行处理。

ellipsis

以三点...(U+2026)表示被修剪掉的文本,如果没有足够的空间显示省略号,则会对其进行裁剪。

<string>👇

<string>表示一串自定义显示在修建文本处的字符串。

fade👇

修剪掉的文本具有淡出效果

white-space

white-space属性用来处理文本中的空白。通常用于处理一段文本是否进行换行。

空格

在 HTML 中,能识别的空格有以下五种:

  • U+0009:以 tab 键入的制表符,放在字符串中会显示成\t
  • U+000D:Carriage Return,回车键入,也就是\r
  • U+000ALF,Line Feed,换行符,用于 Unix 系统,例如 Mac OS,Linux 等换行输入,也就是\n
  • U+000D U+000ACRLF,用于非 Unix 系统,例如 Windows 的换行输入,也就是\r\n
  • U+000C:Form Feed,换页符,CTRL+ENTER 键入
  • U+0020:Space,空格键输入生成的换行符
  • U+00A0NBSP,也就是非断行空格,可以避免因为空格在此处发生断行,在 HTML 可以直接写成&nbsp

根据 HTML 规范的描述,HTML 文档中新的一行以U+000D(CR),U+000A(LF),或者U+000D+U+000A(CRLF)的形式开启,其中U+000A(LF)必须被识别为换行符,

normal | 初始值

white-space: normal是初始值,连续的空白符U+0020会被移除掉,制表符\t会被处理成空格,换行符会被当作空白符来处理。上述的\t\r,以及\n周围的空格都会被移除掉

nowrap

连续的空白符U+0020会被合并,但文本内的换行无效。

pre

连续的空白符会被保留。在遇到换行符或者br元素时才会换行。

pre-wrap

连续的空白符U+0020会被保留。在遇到换行符或者br元素,或者需要为了填充「行框盒子(line boxes)」时才会换行。

pre-line

连续的空白符会被合并在遇到换行符或者br元素,或者需要为了填充「行框盒子(line boxes)」时才会换行。

white-space:pre-line这个属性很强大,尤其是在处理换行文本的时候,说到这里,又得说起不同换行符的处理情况:

系统常见换行符
UnixLinux服务器\n
Windows\r\n
HTML<br/><br>

\n或者\r\n,如果放在字符串里然后再放到 HTML 的标签中,HTML只会将它们都处理成空格。你可能会想到将\n或者 \r\n转换成<br>来期望 HTML 生成换行的效果,不幸的是,如果转成<br><br>会被直接保留下来显示出来!

这时候最简单的处理方式就是使用white-space:pre-line,就可让 HTML 遇到换行符或者<br>自动换行了。

break-spaces

连续的空白符会被保留。在遇到换行符或者br元素,或者需要为了填充「行框盒子(line boxes)」时才会换行。

  • 任何保留的空白序列总是占用空间,包括在行尾,这样保留的空间占用空间而不会挂起,从而影响行内盒子的尺寸
  • 每个保留的空格字符后都存在换行机会,包括空格字符之间

word-break

word-break设置是否在文本溢出内容框的任何地方出现换行符,也就是控制是否允许在单词内换行。

normal

word-break:normal是默认值,也就是不会随意对单词进行换行,可能会发生溢出。

break-all

对于非 CJK(Chinese,Japanese,Korean)文本可在任意字符间进行换行。

keep-all

CJK 文本不进行换行,非 CJK 文本表现同word-break:normal

break-word

已经废弃的 API,效果是word-break: normaloverflow-wrap: anywhere 的合,不论 overflow-wrap的值是多少。

overflow-wrap/word-wrap

overflow-wrapword-wrap是一样的属性,word-wrap 属性原本属于微软的一个私有属性,在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。

normal

overflow-wrap:normal,不会对长的整个单词进行换行处理,可能发生溢出。

break-word

表示如果行内没有多余的地方容纳该单词到结尾,则那些正常的不能被分割的单词会被强制分割换行。

anywhere

为了防止溢出,或者一整个长单词,或者一串 URL,可能会在任意地方截断并换行处理。

line-break

line-break设置在使用标点符号和符号时如何中断中文,日文或韩文(CJK)文本的行。

auto

line-break:auto,默认值。

loose

line-break:loose,使用限制最少的换行规则来中断文本。通常用于短线,例如报纸。

normal

使用最常见的换行规则来中断文本。

strict

使用最严格的换行规则来中断文本。

anywhere

任何字符后面都可能进行换行。

letter-spacing

letter-spacing设置文本字符之间的水平间距。字母间距的正值会导致字符散开得更远,而字母间距的负值会使字符更靠近一起。

normal

letter-spacing:normal,默认值,由浏览器以及用户定义的电脑字体决定。

<length>是长度单位的统称,可指定在CSS - length | MDN (mozilla.org)中的不同单位值。

word-spacing

word-spacing设置单词之间和标签之间的间隔长度。

normal

word-spacing:normal,默认值,由浏览器以及用户定义的电脑字体决定。

length

<length>是长度单位的统称,可指定在CSS - length | MDN (mozilla.org)中的不同单位值。

-webkit-line-clamp

-webkit-line-clamp可以把块级盒子内部的文本内容限定为指定的行数。不过这个属性使用有很多的限制:

  • 块级盒子内部diaplay属性需要是-webkit-box 或者 -webkit-inline-box
  • -webkit-box-orient属性必须指定为vertical
  • 你需要指定line-break: anywhere来引导布局在文本任意处对其进行换行处理,否则以上属性会完全不生效!

webkit前缀的属性一般用于 webkit 渲染引擎的浏览器,例如 Chrome,safari;CSS3 还指定了一个line-clamp属性用来替换-webkit-line-clamp属性,如果是 React,需要注意webkit开头的属性值都是大写开头的。

text-decration

text-decration设置文本的装饰线,它是以下属性的简写属性:

text-decoration-color

text-decoration-color顾名思义,只能取 CSS 里的颜色值color,例如十六进制的值,RGB 值,颜色值关键字等

text-decoration-line

text-decoration-line设置线的位置,可以使用多个值同时设置多条装饰线

  • text-decoration-line:underline下划线
  • text-decoration-line:overline上划线
  • text-decoration-line:line-through贯穿线

text-decoration-style

text-decoration-style设置线的样式

  • text-decoration-style: solid实线

  • text-decoration-style: double双实线

  • text-decoration-style: dotted点状虚线

  • text-decoration-style: dashed虚线

  • text-decoration-style: wavy波浪线

text-decoration-thickness

text-decoration-thickness设置线的粗细,可以使用 CSS 里的长度值<length>,百分比值,当设置百分比值的时候,相对于当前元素字体的1em1em也就是1倍字体大小)。

writing-mode

设置文本在块级元素中的排布方向,如果要改变整个文档的排布方式,可以在根元素html上设置。

horizontal-tb

水平从左往右排布,正常的网页文本布局方式

vertical-rl

块级盒子会垂直排布,其内部文本方向从右往左排布

vertical-lr

块级盒子会垂直排布,其内部文本方向从左往右排布