CSS文本相关的属性大全（ 超过20种 ）

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

文章目录

• • • 1. **字体相关属性**
    • 2. **文本颜色与装饰**
    • 3. **文本间距与缩进**
    • 4. **文本对齐**
    • 5. **行高与垂直对齐**
    • 6. **换行与溢出**
    • 7. **`text-transform`**：控制文本的大小写形式。
    • 8. **`text-shadow`**：给文本添加阴影效果。
    • 9. **`text-overflow`**：处理文本溢出内容的显示方式。
    • 10. **`tab-size`**：设置制表符（tab）的宽度。
    • 11. **`hyphens`**：控制文本自动断词换行功能。
    • 12. **`unicode-bidi`** 和 **`direction`**：用于设置双向文字（如阿拉伯语、希伯来语）的书写方向。

CSS文本属性主要用于控制网页文本的样式，包括字体、大小、颜色、间距、对齐方式、装饰线、换行、缩进等。以下是一些常见的CSS文本属性及其示例代码：

1. 字体相关属性

• font-family：设置文本的字体系列。

  p {
    font-family: 'Arial', sans-serif;
  }
  

• font-size：设置文本的大小。

  h1 {
    font-size: 36px;
  }
  

• font-weight：设置文本的粗细。

  strong {
    font-weight: bold;
  }
  

• font-style：设置文本的斜体样式。

  em {
    font-style: italic;
  }
  

• font-variant：设置小型大写字母。

  p.smallcaps {
    font-variant: small-caps;
  }
  

• font：简写属性，用于设置以上所有字体属性。

  h1 {
    font: italic bold 36px 'Arial', sans-serif;
  }
  
  

2. 文本颜色与装饰

• color：设置文本的颜色。

  p {
    color: red;
  }
  

• text-decoration：设置文本装饰，如下划线、删除线等。

  a {
    text-decoration: none; /* 移除链接下划线 */
  }
  span.strike {
    text-decoration: line-through; /* 添加删除线 */
  }
  
  

3. 文本间距与缩进

• letter-spacing：设置字符之间的间距。

  p.tight {
    letter-spacing: -1px; /* 减小字符间距 */
  }
  

• word-spacing：设置单词之间的间距。

  p.wide {
    word-spacing: 5px; /* 增大单词间距 */
  }
  

• text-indent：设置首行缩进。

  p {
    text-indent: 2em; /* 首行缩进两字单位 */
  }
  
  

4. 文本对齐

• text-align：设置文本的水平对齐方式。

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

5. 行高与垂直对齐

• line-height：设置行间距，也可以用来实现垂直居中。

  p {
    line-height: 1.5; /* 行间距为字体大小的1.5倍 */
  }
  div.container {
    height: 100px;
    line-height: 100px; /* 当行高等于容器高度时，文本垂直居中 */
    vertical-align: middle; /* 配合display: inline-block等实现垂直居中 */
  }
  
  

6. 换行与溢出

• white-space：控制空白符的处理和换行。

  pre {
    white-space: pre-wrap; /* 保留空白符并自动换行 */
  }
  

• overflow-wrap（旧称word-wrap）：允许长单词或URL换行。

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

7. text-transform：控制文本的大小写形式。

   h1 {
     text-transform: uppercase; /* 将文本转为全大写 */
   }
   button.lowercase {
     text-transform: lowercase; /* 将文本转为全小写 */
   }
   p.capitalize {
     text-transform: capitalize; /* 将每个单词的首字母转为大写 */
   }

8. text-shadow：给文本添加阴影效果。

   h1 {
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 文本阴影，水平偏移2px，垂直偏移2px，模糊半径4px，阴影颜色半透明黑色 */
   }

9. text-overflow：处理文本溢出内容的显示方式。

   .ellipsis {
     white-space: nowrap; /* 禁止换行 */
     overflow: hidden; /* 隐藏超出容器的内容 */
     text-overflow: ellipsis; /* 溢出部分以省略号（…）代替 */
   }

10. tab-size：设置制表符（tab）的宽度。

    pre {
      tab-size: 4; /* 设置制表符宽度为4个空格 */
    }

11. hyphens：控制文本自动断词换行功能。

    .auto-hyphenate {
      hyphens: auto; /* 允许文本在必要时自动插入软连字符进行断词换行 */
    }

12. unicode-bidi 和 direction：用于设置双向文字（如阿拉伯语、希伯来语）的书写方向。

    .rtl-text {
      direction: rtl; /* 设置文本方向为从右到左 */
      unicode-bidi: bidi-override; /* 强制文本从右到左显示 */
    }

以上就是CSS中常用的文本属性及其示例代码，通过灵活运用这些属性，您可以根据需求精确地调整网页中文本的各种样式和表现。