CSS排版

如何在CSS中使用排版

在这篇文章中,我将使用以下属性来讨论如何使用CSS设置文本样式:

  • text-transform
  • text-decoration
  • text-align
  • vertical-align
  • line-height
  • text-indent
  • text-align-last
  • word-spacing
  • letter-spacing
  • text-shadow
  • white-space
  • tab-size
  • writing-mode
  • hyphens
  • text-orientation
  • direction
  • line-break
  • word-break
  • overflow-wrap

text-transform

此属性可以转换元素的大小写。

有4个有效值:

  • capitalize大写每个单词的第一个字母
  • uppercase大写所有文本
  • lowercase小写所有文字
  • none禁用转换文本,用于避免继承属性

例子:

p {
  text-transform: uppercase;
}

text-decoration

设置此属性可为文本添加装饰,包括

  • underline
  • overline
  • line-through
  • blink
  • none

例子:

p {
  text-decoration: underline;
}

您还可以设置装饰的样式和颜色。

例子:

p {
  text-decoration: underline dashed yellow;
}

有效的样式值为soliddoubledotteddashedwavy

您可以全部完成一行操作,也可以使用特定的属性:

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style

例子:

p {
  text-decoration-line: underline;
  text-decoration-color: yellow;
  text-decoration-style: dashed;
}

text-align

默认情况下,文本对齐具有start值,表示文本从“开始”(包含该文本的框的原点0、0)开始。这意味着左上用左到右的语言,右上用右到左的语言。

可能的值是startendleftrightcenterjustify(很好的在行尾保持一致的间距):

p {
  text-align: right;
}

vertical-align

确定嵌入式元素如何垂直对齐。

我们为此属性提供了多个值。首先,我们可以指定一个长度或百分比值。这些用于将文本对齐到比父元素的基线更高或更低的位置(使用负值)。

然后,我们有了关键字:

  • baseline(默认值),将基线与父元素的基线对齐
  • sub使元素下标,模拟subHTML元素结果
  • super使元素上标,模拟supHTML元素结果
  • top将元素的顶部与行的顶部对齐
  • text-top将元素的顶部与父元素字体的顶部对齐
  • middle将元素的中间对齐到父级行的中间
  • bottom将元素的底部与行的底部对齐
  • text-bottom将元素的底部与父元素字体的底部对齐

line-height

这使您可以更改线条的高度。每一行文本都有一定的字体高度,但是行之间在垂直方向上还有额外的间距。那是行高:

p {
  line-height: 0.9rem;
}

text-indent

将段落的第一行缩进设定的长度或段落宽度的百分比:

p {
  text-indent: -10px;
}

text-align-last

默认情况下,段落的最后一行在text-align价值。使用此属性可以更改该行为:

p {
  text-align-last: right;
}

word-spacing

修改每个单词之间的间距。

您可以使用normal关键字,以重置继承的值,或使用长度值:

p {
  word-spacing: 2px;
}

span { word-spacing: -0.2em; }

letter-spacing

修改每个字母之间的间距。

您可以使用normal关键字,以重置继承的值,或使用长度值:

p {
  letter-spacing: 0.2px;
}

span { letter-spacing: -0.2em; }

text-shadow

在文字上加上阴影。默认情况下,文本现在带有阴影。

此属性接受可选的颜色以及一组设置的值

  • 阴影从文本的X偏移量
  • 阴影从文本的Y偏移量
  • 模糊半径

如果未指定颜色,则阴影将使用文本颜色。

例子:

p {
  text-shadow: 0.2px 2px;
}

span { text-shadow: yellow 0.2px 2px 3px; }

white-space

设置CSS如何处理元素内的空白,换行和制表符。

折叠空白的有效值为:

  • normal折叠空白。当文本到达容器末端时,在必要时添加新行
  • nowrap折叠空白。当文本到达容器的末尾时不添加新行,并禁止添加到文本的任何换行符
  • pre-line折叠空白。当文本到达容器末端时,在必要时添加新行

保留空白的有效值为:

  • pre保留空白。当文本到达容器的末尾时不添加新行,但保留添加到文本的换行符
  • pre-wrap保留空白。当文本到达容器末端时,在必要时添加新行

tab-size

设置制表符的宽度。默认情况下为8,您可以设置一个整数值来设置它占用的字符空间,或者一个长度值:

p {
  tab-size: 2;
}

span { tab-size: 4px; }

writing-mode

定义文本行是水平放置还是垂直放置,以及块前进的方向。

您可以使用的值是

  • horizontal-tb(默认)
  • vertical-rl内容垂直放置。新行放在上一行的左侧
  • vertical-lr内容垂直放置。新行放在上一行的右侧

hyphens

确定在换行时是否应自动添加连字符。

有效值为

  • none(默认)
  • manual仅当已经存在可见的连字符或隐藏的连字符(特殊字符)时才添加连字符
  • auto确定文本可以有连字符时添加连字符。

text-orientation

什么时候writing-mode在垂直模式下,确定文本的方向。

有效值为

  • mixed是默认设置,并且如果语言是垂直语言(如日语),则在旋转以西方语言编写的文本时会保留该方向
  • upright使所有文本都垂直放置
  • sideways使所有文本为水平方向

direction

设置文本的方向。有效值为ltrrtl

p {
  direction: rtl;
}

word-break

此属性指定如何在单词内换行。

  • normal(默认值)表示文本仅在单词之间打断,而不在单词内部打断
  • break-all浏览器可以打断单词(但不添加连字符)
  • keep-all抑制软包装。主要用于CJK(中文/日文/韩文)文本。

说到中日韩文字,财产line-break用于确定文本行的折断方式。我不是那些语言的专家,所以我会避免涉及它。

overflow-wrap

如果单词太长而无法容纳一行,它可能会在容器外部溢出。

此属性也称为word-wrap,尽管这是非标准的(但仍可以用作别名)

这是默认行为(overflow-wrap: normal;)。

我们可以用:

p {
  overflow-wrap: break-word;
}

在行的确切长度处将其断开,或者

p {
  overflow-wrap: anywhere;
}

如果浏览器发现较早的某个地方存在软包装的机会。在任何情况下都不会添加连字符。

此属性非常类似于word-break。我们可能想在西方语言中选择一种,而word-break对非西方语言有特殊待遇。

免费下载我的CSS手册


更多CSS教程: