1. 段落变形

概念： 段落变形包括下划线、英文大小写转换、阴影、首航缩进和对齐方式等。

属性	值	描述
`text-decoration`	`none` `underline` `line-through` `overline`	无文本线条（默认）下划线删除线上划线
`text-transform`	`uppercase` `lowercase` `capitalize`	将英文文本转换大写将英文文本转换小写首字母大写（字母前需空格）
`text-shadow`	`2px 2px 3px red`	水平偏移垂直偏移模糊颜色
`text-indent`	`normal`、`20px`	首行缩进
`text-align`	`left` `center` `right` `justify` `start` `end`	文本左对齐文本居中本文右对齐文本两端对齐文本对齐开始边界文本对齐结束边界

布局：

<p>文本</p>
<p> I am joe Zhou</p>
<p>文本</p>
<p>文本</p>
<p>文本</p>

样式：

p:nth-child(1){
    text-decoration: overline;
    text-decoration: underline;
    text-decoration: line-through;
}

p:nth-child(2){
    text-transform: uppercase;
    text-transform: lowercase;
    text-transform: capitalize;
}

p:nth-child(3){
    text-shadow: 10px 10px 100px red;
}

p:nth-child(4){
    text-align:center;
}

p:nth-child(5){ 
    text-indent: 100px; 
}

2. 段落空间

概念： 段落空间包换行、字母间距、单词间距、行高等。

属性	值	描述
`white-space`	`normal` `nowrap` `pre` `pre-line` `pre-wrap`	空格压缩，自动换行空格压缩，不换行空格保留，遇 `<br />` 换行，行满不换行空格压缩，遇 `<br />` 或行满换行空格保留，遇 `<br />` 或行满换行
`word-wrap`	`normal` `break-word`	长单词不换行（默认）长单词换行
`letter-spacing`	`normal`、`5px`	字母之间的间距，中文也行
`word-spacing`	`normal`、`5px`	单词之间的间距，中文也行
`line-height`	`normal`、`200%`、`20px`	行高

布局：

<p>文本文本<br/>文本               文本</p>
<p>heeeeeeeeeeello wooooooooooooooooord</p>
<p>Zhou</p>
<p>Joe Zhou</p>
<p>Hello</p>

样式：

p{
    width: 100px;
    border: 1px solid red;
}

p:nth-child(1){
    white-space: normal;
}

p:nth-child(2){ 
    word-wrap: normal;
}

p:nth-child(3){ 
    letter-spacing: 50px; 
}

p:nth-child(4){ 
    word-spacing: 50px; 
}

p:nth-child(5){ 
    line-height: 100px; 
}

周老师讲:CSS段落变形

1. 段落变形

2. 段落空间