css样式排版问题_CSS排版

css样式排版问题

In this post I’ll talk about styling text with CSS, using the following properties:

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

• text-transform

  text-transform

• text-decoration

  text-decoration

• text-align

  text-align

• vertical-align

  vertical-align

• line-height

  line-height

• text-indent

  text-indent

• text-align-last

  text-align-last

• word-spacing

  word-spacing

• letter-spacing

  letter-spacing

• text-shadow

  text-shadow

• white-space

  white-space

• tab-size

  tab-size

• writing-mode

  writing-mode

• hyphens

  hyphens

• text-orientation

  text-orientation

• direction

  direction

• line-break

  line-break

• word-break

  word-break

• overflow-wrap

  overflow-wrap

text-transform (text-transform)

This property can transform the case of an element.

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

There are 4 valid values:

有4个有效值：

• capitalize to uppercase the first letter of each word

  capitalize为大写每个单词的第一个字母

• uppercase to uppercase all the text

  uppercase写到全部大写

• lowercase to lowercase all the text

  lowercase将所有文本都小写

• none to disable transforming the text, used to avoid inheriting the property

  none禁用转换文本，用于避免继承属性

Example:

例：

p {
  text-transform: uppercase;
}

text-decoration (text-decoration)

This property is sed to add decorations to the text, including

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

• underline

  underline

• overline

  overline

• line-through

  line-through

• blink

  blink

• none

  none

Example:

例：

p {
  text-decoration: underline;
}

You can also set the style of the decoration, and the color.

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

Example:

例：

p {
  text-decoration: underline dashed yellow;
}

Valid style values are solid, double, dotted, dashed, wavy.

有效的样式值是solid ， double dotted ， dashed ， dashed ， wavy 。

You can do all in one line, or use the specific properties:

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

• text-decoration-line

  text-decoration-line

• text-decoration-color

  text-decoration-color

• text-decoration-style

  text-decoration-style

Example:

例：

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

text-align (text-align)

By default text align has the start value, meaning the text starts at the “start”, origin 0, 0 of the box that contains it. This means top left in left-to-right languages, and top right in right-to-left languages.

默认情况下，文本对齐有start值，在“开始”，原点0，包含它的箱子0意味着该文本开始。 这表示左上用左到右的语言，右上上用从右到左的语言。

Possible values are start, end, left, right, center, justify (nice to have a consistent spacing at the line ends):

可能的值是start ， end ， left ， right ， center ， justify (很好的在行尾具有一致的间距)：

p {
  text-align: right;
}

vertical-align (vertical-align)

Determines how inline elements are vertically aligned.

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

We have several values for this property. First we can assign a length or percentage value. Those are used to align the text in a position higher or lower (using negative values) than the baseline of the parent element.

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

Then we have the keywords:

然后，我们有了关键字：

• baseline (the default), aligns the baseline to the baseline of the parent element

  baseline (默认)，将基线与父元素的基线对齐

• sub makes an element subscripted, simulating the sub HTML element result

  sub使元素下标，模拟sub HTML元素结果

• super makes an element superscripted, simulating the sup HTML element result

  super使元素上标，模拟sup HTML元素结果

• top align the top of the element to the top of the line

  top将元素的顶部与行的top对齐

• text-top align the top of the element to the top of the parent element font

  text-top将元素的顶部与父元素的字体text-top对齐

• middle align the middle of the element to the middle of the line of the parent

  将元素的middle对齐到父级行的中间

• bottom align the bottom of the element to the bottom of the line

  使元素的底部与行的bottom对齐

• text-bottom align the bottom of the element to the bottom of the parent element font

  text-bottom将元素的底部与父元素字体text-bottom对齐

line-height (line-height)

This allows you to change the height of a line. Each line of text has a certain font height, but then there is additional spacing vertically between the lines. That’s the line height:

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

p {
  line-height: 0.9rem;
}

text-indent (text-indent)

Indent the first line of a paragraph by a set length, or a percentage of the paragraph width:

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

p {
  text-indent: -10px;
}

text-align-last (text-align-last)

By default the last line of a paragraph is aligned following the text-align value. Use this property to change that behavior:

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

p {
  text-align-last: right;
}

word-spacing (word-spacing)

Modifies the spacing between each word.

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

You can use the normal keyword, to reset inherited values, or use a length value:

您可以使用normal关键字来重置继承的值，也可以使用长度值：

p {
  word-spacing: 2px;
}

span {
  word-spacing: -0.2em;
}

letter-spacing (letter-spacing)

Modifies the spacing between each letter.

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

You can use the normal keyword, to reset inherited values, or use a length value:

您可以使用normal关键字来重置继承的值，也可以使用长度值：

p {
  letter-spacing: 0.2px;
}

span {
  letter-spacing: -0.2em;
}

text-shadow (text-shadow)

Apply a shadow to the text. By default the text has now shadow.

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

This property accepts an optional color, and a set of values that set

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

• the X offset of the shadow from the text
  阴影从文本的X偏移量
• the Y offset of the shadow from the text
  阴影从文本的Y偏移
• the blur radius
  模糊半径

If the color is not specified, the shadow will use the text color.

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

Examples:

例子：

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

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

white-space (white-space)

Sets how CSS handles the white space, new lines and tabs inside an element.

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

Valid values that collapse white space are:

折叠空白的有效值为：

• normal collapses white space. Adds new lines when necessary as the text reaches the container end

  normal折叠空白。 当文本到达容器末端时，在必要时添加新行

• nowrap collapses white space. Does not add a new line when the text reaches the end of the container, and suppresses any line break added to the text

  nowrap折叠空白区域。 当文本到达容器的末尾时不添加新行，并禁止添加到文本的任何换行符

• pre-line collapses white space. Adds new lines when necessary as the text reaches the container end

  pre-line折叠空白。 当文本到达容器末端时，在必要时添加新行

Valid values that preserve white space are:

保留空白的有效值为：

• pre preserves white space. Does not add a new line when the text reaches the end of the container, but preserves line break added to the text

  pre保留空白。 当文本到达容器的末尾时不添加新行，但保留添加到文本的换行符

• pre-wrap preserves white space. Adds new lines when necessary as the text reaches the container end

  pre-wrap保留空白。 当文本到达容器末端时，在必要时添加新行

tab-size (tab-size)

Sets the width of the tab character. By default it’s 8, and you can set an integer value that sets the character spaces it takes, or a length value:

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

p {
  tab-size: 2;
}

span {
  tab-size: 4px;
}

writing-mode (writing-mode)

Defines whether lines of text are laid out horizontally or vertically, and the direction in which blocks progress.

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

The values you can use are

您可以使用的值是

• horizontal-tb (default)

  horizontal-tb (默认)

• vertical-rl content is laid out vertically. New lines are put on the left of the previous

  vertical-rl内容垂直放置。 新行放在上一行的左侧

• vertical-lr content is laid out vertically. New lines are put on the right of the previous

  vertical-lr内容垂直放置。 新行放在上一行的右侧

hyphens (hyphens)

Determines if hyphens should be automatically added when going to a new line.

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

Valid values are

有效值为

• none (default)

  none (默认)

• manual only add an hyphen when there is already a visible hyphen or a hidden hyphen (a special character)

  manual仅在已有可见的连字符或隐藏的连字符(特殊字符)时添加连字符

• auto add hyphens when determined the text can have a hyphen.

  确定文本可以带有连字符时， auto添加连字符。

text-orientation (text-orientation)

When writing-mode is in a vertical mode, determines the orientation of the text.

当writing-mode处于垂直模式时，确定文本的方向。

Valid values are

有效值为

• mixed is the default, and if a language is vertical (like Japanese) it preserves that orientation, while rotating text written in western languages

  默认情况下为“ mixed ”，如果语言是垂直语言(如日语)，则在旋转以西方语言书写的文本时，将保持该方向

• upright makes all text be vertically oriented

  upright使所有文本都垂直放置

• sideways makes all text horizontally oriented

  sideways使所有文本水平定向

direction (direction)

Sets the direction of the text. Valid values are ltr and rtl:

设置文本的方向。 有效值为ltr和rtl ：

p {
  direction: rtl;
}

word-break (word-break)

This property specifies how to break lines within words.

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

• normal (default) means the text is only broken between words, not inside a word

  normal (默认)表示文本仅在单词之间打断，而不在单词内部

• break-all the browser can break a word (but no hyphens are added)

  break-all浏览器都可以破坏单词(但不添加连字符)

• keep-all suppress soft wrapping. Mostly used for CJK (Chinese/Japanese/Korean) text.

  keep-all压软包装。 主要用于CJK(中文/日文/韩文)文本。

Speaking of CJK text, the property line-break is used to determine how text lines break. I’m not an expert with those languages, so I will avoid covering it.

说到CJK文本，属性line-break用于确定文本行的断开方式。 我不是那些语言的专家，所以我会避免涉及它。

overflow-wrap (overflow-wrap)

If a word is too long to fit a line, it can overflow outside of the container.

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

This property is also known as word-wrap, although that is non-standard (but still works as an alias)

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

This is the default behavior (overflow-wrap: normal;).

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

We can use:

我们可以用：

p {
  overflow-wrap: break-word;
}

to break it at the exact length of the line, or

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

p {
  overflow-wrap: anywhere;
}

if the browser sees there’s a soft wrap opportunity somewhere earlier. No hyphens are added, in any case.

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

This property is very similar to word-break. We might want to choose this one on western languages, while word-break has special treatment for non-western languages.

此属性与word-break非常相似。 我们可能想在西方语言中选择一种，而word-break对非西方语言有特殊的对待。

翻译自: https://flaviocopes.com/css-typography/

css样式排版问题