text-decoration

用于设置文字的装饰线

常见取值:

  • none： 无任何装饰线, 可以去除 a 元素默认的下划线
  • underline： 下划线
  • overline： 上划线
  • line-through： 中划线（删除线）

a 元素默认有下划线的本质是被添加了 text-decoration 属性

text-transform

用于设置文字的大小写转换

常见的值:

  • capitalize： (使…首字母大写, 资本化的意思) 将每个单词的首字符变为大写
  • uppercase： (大写字母) 将每个单词的所有字符变为大写
  • lowercase： (小写字母) 将每个单词的所有字符变为小写
  • none：没有任何影响

实际开发中用JavaScript代码转化的更多

text-indent

用于设置第一行内容的缩进

  • text-indent: 32px; 是缩进 32 个像素
  • text-indent: 2em; 刚好是缩进 2 倍文字 (继承自上面字体大小的设置)

text-align

设置文本 (包含图片, 输入框等) 的对齐方式

MDN: 定义行内内容（例如文字）如何相对它的块父元素对齐;

常用的值:

  • left：左对齐
  • right：右对齐
  • center：正中间显示
  • justify：两端对齐

注意: 行内内容, 应该是行内级内容, div 是块级内容, 无效

演示如下:

<body>
  
  <div class="box">
    <div class="content"></div>
  </div>

</body>
<style>
    .box {
      background-color: #f00;
      height: 300px;
    
      text-align: center;
    }
    .content {
      background-color: #0f0;
      height: 200px;
      width: 200px;
    }
</style>

效果:

设置 div 是行内级后

<style>
    .box {
      background-color: #f00;
      height: 300px;
    
      text-align: center;
    }
    
    .content {
      background-color: #0f0;
      height: 200px;
      width: 200px;
    
      /* display: inline-block; */
      margin: 0 auto;
    }
</style>

效果:

<body>
  
  <div class="box">
    This CSS module defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, and text transformation. why
  </div>

</body>
<style>
    .box {
      width: 200px;
      background-color: #f00;
      color: white;
      /*两端对齐,但最后一行不生效*/
      text-align: justify;
      /*单独设置最后一行两端对齐*/
      text-align-last: justify;
    }
</style>

设置前:

设置后:

letter-spacing 和 word-spacing

分别用于设置字母、单词之间的间距

  • 默认是0，可以设置为负数