文本相关：`text-align`、`text-indent`、`text-decoration`、`text-shadow`、`letter-spacing`、`word-spacing`、`white-space`； * **`text-align:`** `left:` 把文本排列到左边。默认值：由浏览器决定。 `right:` 把文本排列到右边。 `center:` 把文本排列到中间。 `justify:`实现两端对齐文本效果。 `inherit:` 规定应该从父元素继承 text-align 属性的值。 * **`text-align-last:`** `left:` 将最后一行文本与容器左侧对齐。 `right:`将最后一行文本与容器右侧对齐。 `center:` 将容器内的最后一行文本居中。 `justify:`对齐文本的最后一行，使其跨越容器的整个宽度，如果需要，在单词之间插入空格以增加行长。 `start:`将文本与行的`开始`对齐。 `end:`将最后一行与行的`结尾`对齐。 `auto:`默认值。对齐最后一行文本以匹配元素的text-align属性（如果已设置）。如果未设置，auto则将文本与开头对齐。 `inherit:`应用text-align-last父元素的属性。 * **`text-indent :`** `text-indent `属性指定在元素的文本内容的第一行开始之前应该移动多少水平间距文本。 *间距是从块级容器元素的起始边缘计算的。本属性对行内元素无效。* > 首行缩进两个字符：text-indent: 2em; >文字隐藏：text-indent: -9999px; * **`text-decoration :`** ~~~ .underline { text-decoration: underline; text-decoration-color: #dd6ff8; } .solid { text-decoration-style: solid; } .dotted { text-decoration-style: dotted; } .dashed { text-decoration-style: dashed; } .wavy { text-decoration-style: wavy; } .overline { text-decoration-line: overline; text-decoration-color: #dd6ff8; } .underline-overline { text-decoration-line: underline overline; text-decoration-color: #dd6ff8; } .line-through { text-decoration: line-through; text-decoration-color: #dd6ff8; } .thickness { display: flex; justify-content: center; } .thin { text-decoration-thickness: 1.5px; } .normal { text-decoration-thickness: 2.5px; } .thick { text-decoration-thickness: 6px; } .underline-offset { justify-content: center; display: flex; } .double { text-decoration-style: double; } .offset { text-underline-offset: 4px; } .wavy.offset{ text-underline-offset: 8px; } ~~~ * **`text-shadow：`** > 1.text-shadow:水平位置 垂直位置 模糊距离 阴影颜色; > 2.前两项是必须写的。 后两项可以选写。 <hr> **超出部分显示省略号** * 单行 ~~~ overflow: hidden; /*超出部分隐藏*/ text-overflow: ellipsis; /*超出部分显示省略号*/ white-space: nowrap;/*规定段落中的文本不进行换行 */ ~~~ * 多行 ~~~ overflow: hidden; display: -webkit-box;/*将对象作为弹性伸缩盒子模型显示  *必须结合的属性* */ -webkit-box-orient: vertical;/*设置伸缩盒对象的子元素的排列方式  *必须结合的属性* */ -webkit-line-clamp: 3;/*用来限制在一个块元素中显示的文本的行数*/ word-break: break-all;/*让浏览器实现在任意位置的换行 *break-all为允许在单词内换行* */ ~~~ **换行** ~~~ /*不换行*/ white-space:nowrap; /*自动换行*/ word-wrap: break-word; word-break: normal; /*强制换行*/ word-break:break-all; ~~~ **两端对齐** ~~~ text-align: justify; text-justify: distribute-all-lines;/*ie6-8*/ text-align-last: justify;/*一个块或行的最后一行对齐方式*/ -moz-text-align-last: justify; -webkit-text-align-last: justify; ~~~ **文字竖向排版** ~~~ /*单列展示*/ width: 25px; line-height: 18px; height: auto; font-size: 12px; padding: 8px 5px; word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/ /*多列展示*/ height: 210px; line-height: 30px; text-align: justify; writing-mode: vertical-lr;/*从左向右*/ writing-mode: tb-lr;/*IE从左向右* /*writing-mode: vertical-rl;  -- 从右向左*/ /*writing-mode: tb-rl;        -- 从右向左*/ ~~~ **禁止用户选择** ~~~ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; ~~~ **隐藏文字** ~~~ font: 0/0 a; color: transparent; text-indent: -9999px; ~~~ **文字少时居中，多时靠左** ~~~ .box { text-align: center; } .content { display: inline-block; text-align: left; word-break: break-all; } ~~~ **名称为纯英文数字等不换行问题** ~~~ element{word-wrap:break-word;word-break:break-all;} ~~~ **vertical-align** > 生效条件:只能应用在`display`为`inline`、`inline-block`、`inline-table`、`table-cell`上。