CSS 提供了一系列文本相关属性，用于控制文本的样式、对齐、间距、装饰、换行等。这些属性能帮助我们更好地控制文本的显示效果。

1. 文本颜色与阴影

1.1 color

  • 用于设置文本的颜色。
  • 值可以是颜色名称、RGB、HEX 或 HSL。

示例：

p {
  color: red; /* 设置文本颜色为红色 */
}

1.2 text-shadow

  • 为文本添加阴影。

  • 语法：

    text-shadow: x-offset y-offset blur-radius color;
    • x-offset：水平偏移量。
    • y-offset：垂直偏移量。
    • blur-radius：模糊半径（可选）。
    • color：阴影的颜色。

示例：

h1 {
  text-shadow: 2px 2px 5px gray; /* 添加灰色阴影 */
}

2. 文本对齐

2.1 text-align

  • 设置文本的水平对齐方式。

  • 属性值：

    • left：左对齐（默认）。
    • right：右对齐。
    • center：居中对齐。
    • justify：两端对齐。

示例：

p {
  text-align: center; /* 文本居中对齐 */
}

2.2 vertical-align

  • 设置文本或内联元素的垂直对齐方式。

  • 属性值：

    • baseline（默认）：与父元素的基线对齐。
    • sub：作为下标对齐。
    • super：作为上标对齐。
    • top：顶部对齐。
    • middle：中间对齐。
    • bottom：底部对齐。

示例：

span {
  vertical-align: super; /* 设置为上标 */
}

3. 文本装饰

3.1 text-decoration

  • 设置文本的装饰效果（如下划线、删除线等）。

  • 属性值：

    • none：无装饰。
    • underline：下划线。
    • overline：上划线。
    • line-through：删除线。
    • blink（已废弃）：闪烁效果。

示例：

a {
  text-decoration: underline; /* 为链接添加下划线 */
}

4. 文本转换与格式化

4.1 text-transform

  • 控制文本的大小写转换。

  • 属性值：

    • none（默认）：不改变。
    • capitalize：首字母大写。
    • uppercase：转为大写。
    • lowercase：转为小写。

示例：

p {
  text-transform: uppercase; /* 将文本转换为大写 */
}

4.2 letter-spacing

  • 设置文本字符之间的间距。
  • 值可以是正值（增加间距）或负值（减少间距）。

示例：

p {
  letter-spacing: 2px; /* 字符之间增加 2px 的间距 */
}

4.3 word-spacing

  • 设置单词之间的间距。
  • 值可以是正值（增加间距）或负值（减少间距）。

示例：

p {
  word-spacing: 5px; /* 单词之间增加 5px 的间距 */
}

4.4 white-space

  • 控制空格和换行符的处理方式。

  • 属性值：

    • normal（默认）：合并空白字符，文本在必要时换行。
    • nowrap：合并空白字符，文本不会换行。
    • pre：保留空白字符，文本不会换行。
    • pre-wrap：保留空白字符，文本在必要时换行。
    • pre-line：合并多余空白字符，必要时换行。

示例：

pre {
  white-space: pre; /* 保留文本中的空格和换行符 */
}

4.5 line-height

  • 设置文本的行高（行间距）。

  • 值可以是：

    • 数值：相对于当前字体大小的倍数（如 1.5）。
    • 长度单位：固定的高度（如 20px）。
    • 百分比：相对于字体大小的百分比（如 150%）。

示例：

p {
  line-height: 1.6; /* 设置行高为字体高度的 1.6 倍 */
}

5. 文本溢出与换行

5.1 text-overflow

  • 控制文本溢出时的显示方式，通常需要与 overflow: hidden 和 white-space: nowrap 一起使用。

  • 属性值：

    • clip：裁剪溢出内容，不显示省略号。
    • ellipsis：显示省略号。

示例：

p {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 溢出时显示省略号 */
}

5.2 word-wrap（现已更名为 overflow-wrap）

  • 控制长单词的换行方式。

  • 属性值：

    • normal（默认）：只在允许的断点换行。
    • break-word：强制长单词换行。

示例：

p {
  word-wrap: break-word; /* 长单词强制换行 */
}

5.3 hyphens

  • 控制文本的断字（自动添加连字符）。

  • 属性值：

    • none（默认）：禁用断字。
    • manual：仅在内容中插入软连字符（­）的位置断字。
    • auto：根据语言规则自动断字。

示例：

p {
  hyphens: auto; /* 自动断字 */
}

6. 方向与书写模式

6.1 direction

  • 控制文本的书写方向。

  • 属性值：

    • ltr（默认）：从左到右。
    • rtl：从右到左。

示例：

p {
  direction: rtl; /* 从右到左书写 */
}

6.2 writing-mode

  • 定义文本的书写模式。

  • 属性值：

    • horizontal-tb（默认）：从左到右，从上到下。
    • vertical-rl：从上到下，从右到左。
    • vertical-lr：从上到下，从左到右。

示例：

p {
  writing-mode: vertical-rl; /* 垂直从上到下，从右到左排列 */
}

总结

以下是常用文本相关的属性分类及其功能：

  1. 颜色与阴影：color、text-shadow
  2. 对齐方式：text-align、vertical-align
  3. 文本装饰：text-decoration
  4. 文本转换与格式化：text-transform、letter-spacing、word-spacing、white-space、line-height
  5. 文本溢出与换行：text-overflow、word-wrap（或 overflow-wrap）、hyphens
  6. 方向与书写模式：direction、writing-mode

通过这些属性，我们可以有效地控制文本的颜色、对齐、间距、换行、装饰等，满足各种排版需求。

标签: CSS

评论已关闭