css文本外观属性大全（内附实例与图解）

目录

1. letter-spaceing：字间距

2. Word-spacing：单词间距

3. line-height：行间距

4. text-decoration：文本修饰

5. text-align:水平对齐方式

6. text-indent：首行缩进

7. white-space：空白符处理

8. Word-break：自动换行

9. text-Shadow：文字阴影

10. overflow 文字溢出

11. text-overflow 文字溢出处理

12. letter-spaceing：字间距

Letter-space属性用于定义字间距

2. Word-spacing：单词间距

-Word-spacing属性用于定义英文单词之间的间距，对中文字符无效，和letter-spacing一样，其属性值可以为不同的单位数值，允许使用负值默认为normal

Word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母间的间距，而Word-spacing定义的为英文单词之间的间距

3. line-height：行间距

Line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称成为行高。Line-height常用的属性单位有三种，分别为像素px,相对值em，和百分比%，实际工作中使用最多的是像素px

行高： 文本顶部 + 文本底部 + 一倍行距
Css定义的行高：两行文本之间的基线的距离就是行高（加上去其实就等于上面定义行高的距离）

行高可以跟单位，也可以不跟单位，但是意义不同
Font: 12px/1.5em ‘宋体’;
Font: 12px/150% ‘宋体’;
Font: 12px/1.5 ‘宋体’;
Font: 12px/20px ‘宋体’; （绝对）
继承特性：
加上单位 先计算 后继承 是父类为基准
不加单位 先继承 后计算 是孩子根据自己的文字为基准
Line-height: 可以让单行文本垂直居中
行高=盒子的高度的时候文本在盒子中垂直方向居中
行高>盒子高度：文本偏下
行高<盒子高度：文本偏上

通常设置行高来控制文本的垂直居中

4. text-decoration：文本修饰

Text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性如下：
-none：没有装饰（正常文本默认）
-underline：下划线
-overline：上划线
-line-through: 删除线

text-decoration: underline;

text-decoration: overline;

text-decoration: line-through;

另外，text-decoraction后可以赋多个值，用于给文本添加多种显示效果，例如希望文字同时有下划线跟删除线效果，就可以将underline和line-through同时赋值给text-decoration。

清除a标签的默认样式

a {
            text-decoration: none;
   }

5. text-align:水平对齐方式

Text-align属性用于设置文本内容的水平对齐，相当于HTML中的align对齐属性，其可用属性值如下：
-left： 左对齐（默认）
-right： 右对齐
-center： 居中对齐

常用的文字水平居中

text-align: center;

6. text-indent：首行缩进

Text-indent属性用于设置段落的文本缩进，只能设置于块级标签。其属性值可为不同单位的数值，em字符宽度的倍数，或相当于浏览器窗口宽度的百分比%，允许使用负值，建议用em作为设置单位

一般用于网站h1标题的SEO优化

h1 {
text-indent: -9999px;
}

P {
Text-indent: 2em;
/*首行缩进*/
}

7. white-space：空白符处理

使用HTML制作网页时，不论源代码中多少空格，在浏览器中只会显示一个字符的空白。在css中，使用white-space属性可设置空白字符1的处理方式，其属性如下：

-normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行

-pre：预格式化，按文档的书写格式保留空格、空行原样显示

-nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记
。内容超过元素边界也不换行，若超出浏览器页面则会自动增加滚动条。

8. Word-break：自动换行

-Normal：使用浏览器默认的换行规则，不打断单词完整
-break-all：允许在单词内进行换行
-keep-all：只能在半角空格或连字符处进行换行 连字符“- ，。 .”

Normal：

Break-all：

Keep-all：

9. text-Shadow：文字阴影

格式：

text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色;

注意设置文字阴影时，水平位置与垂直位置一定不能省，其他可以省略

 text-shadow: 10px 10px 5px #1234;

文字多阴影

语法格式同多背景

text-shadow: 2px 2px 5px blue,
             5px 5px 5px red;

文字凹凸效果

利用文字多阴影设置两个方向相反的文字阴影实现

凹：text-shadow: 1px 1px #000,-1px -1px #fff;
凸： text-shadow: -1px -1px #000,1px 1px #fff;

10. overflow 文字溢出

取值：
visible： 对溢出内容不做处理，内容可能会超出容器。 （默认）
hidden： 隐藏溢出容器的内容且不出现滚动条。
scroll： 隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
auto： 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。

常用：

overflow: hidden;

11. text-overflow 文字溢出处理

取值：
clip： 当内联内容溢出块容器时，将溢出部分裁切掉。
ellipsis： 当内联内容溢出块容器时，将溢出部分替换为（…）

注意：text-overflow使用需要配合overflow：hidden；（超出部分隐藏）和white-space：nowrap；（单行显示）一起使用

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;