字体属性
字体属性是用来设定“文字字形”的外观表现，主要包括：
颜色， 字体名称， 大小， 是否斜体（字体样式）， 是否粗体。
color， font-family， font-size， font-style，font-weight
常用字体属性如下所示：
| 属性名称 | 含义与说明 | 举例 | 其他 |
|---|---|---|---|
| color | 文字的颜色，又称为“前景色” | color: red; color:#ff0000; color:rgb(255, 50, 100) color:rgba(250,0,0,0.7) | 颜色值可以有多种写法 |
| font-family | 文字的字体，比如宋体，黑体，微软雅黑，隶书。 | font-family: 宋体； font-family: 微软雅黑，宋体； font-family: “Times New Roman”; | 可以设定多个值，浏览器优先使用前面的，没有再依次找后面的，或使用内部字体。 |
| font-size | 文字的大小 | font-size: 14px; | px是长度单位，表示“像素” |
| font-style | 文字的样式（决定字体是正体还是斜体） | font-style: itatic; font-style: normal;（默认值） | （正常字体，默认值）；itatic（斜体） |
| font-weight | 文字的粗细度 | font-weight: bold; font-weight:bolder; | 有4个值可用： normal, bold, bolder, lighter |
| font | 上述所有文字属性的综合属性。 | font:red 宋体 14px italic bold; | 属性值依次写出，空格隔开，不分顺序 |
文本属性
文本属性通常指的是作为文字内容的整体性特性（而不是具体文字的表现特性）。
常用属性有：
| 属性名称 | 含义 | 举例 | 其他说明 |
|---|---|---|---|
| text-align | 一段文字的对齐方式 | text-align: center; | 可用值：left， center， right, justify , inherit |
| text-decoration | 一段文字的”修饰线” | text-decoration：underline | 可用值：underline（下划线），overline（上划线），line-through（中划线） |
| text-indent | 设置一段文本的“首行缩进”的宽度（距离） | text-indent: 24px; | px是长度单位，表示“像素” |
| line-height | 设定文字的“行高” | line-height: 30px; line-height: 2em; | em是长度单位，表示“字高” |
| letter-spacing | 设定文字的“字符间距” | letter-spacing: 3px; | 注意：中文的每个字都算一个字符 |
| word-spacing | 设定文字的“单词间距” | word-spacing: 15px; | 注意：单词通常是以“空格”隔开的。因此，连续的中文即使很长也只能算一个单词。 |
| white-space | 文档中的空白处 | white-space:nowrap | 属性值: noraml: 默认忽略多个空格,只输出一个空格 nowrap: 强制不换行 pre:空格/缩进/换行 会给保留 pre-line:合并空表(多个空格只会输出一个空格) pre-warp:保留空白/缩进,正常换行 |
| text-overflow | 当文本溢出包含元素时发生的事情 | text-overflow:ellipsis; | 属性值: clip 修剪文本 ellipsis 显示省略符号来代表被修剪的文本 string 使用给定的字符串来代表被修剪的文本 word-spacing :控制单词间空格的距离，以空格来区分单词，中英都OK |
| text-transform | 转换大小写 | text-transform:uppercase | 属性值: none(默认) 无转换 capitalize:每个单词第一个字母为大写 upercase :转换成大写 lowercase:转换成小写 |
| overflow-wrap | 当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行 | overflow-wrap: break-word | 属性值： normal：允许内容顶开或溢出指定的容器边界 break-word：内容将在边界内换行。如果需要，单词内部允许断行 |
| direction | 文字摆放方向 | direction: rtl | 属性值： ltr 默认。文本方向从左到右。 rtl 文本方向从右到左。 inherit 规定应该从父元素继承 direction 属性的值。 |
| vertical-align | 设置或检索内联元素在行框内的垂直对其方式 | vertical-align:middle | 属性值： baseline：将支持valign特性的对象的内容与基线对齐 sub：垂直对齐文本的下标 super：垂直对齐文本的上标 top：将支持valign特性的对象的内容与对象顶端对齐 text-top：将支持valign特性的对象的文本与对象顶端对齐 middle：将支持valign特性的对象的内容与对象中部对齐 bottom：将支持valign特性的对象的文本与对象底端对齐 text-bottom：将支持valign特性的对象的文本与对象顶端对齐 |
| text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 | text-emphasis: text-emphasis-style text-emphasis-color; | 目前主流浏览器都不支持 text-emphasis 属性。 |
| text-shadow | 规定添加到文本的阴影效果。 | text-shadow: 5px 5px 5px #FF0000; | text-shadow: h-shadow v-shadow blur color; |
| text-justify | 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 | text-justify:inter-word | 属性值： auto 浏览器决定齐行算法。 none 禁用齐行。 inter-word 增加/减少单词间的间隔。 inter-ideograph 用表意文本来排齐内容。 inter-cluster 只对不包含内部单词间隔的内容（比如亚洲语系）进行排齐。 distribute 类似报纸版面，除了在东亚语系中最后一行是不齐行的。 kashida 通过拉伸字符来排齐内容。 |
| text-wrap | 规定文本的换行规则。 | text-wrap:none | 属性值： normal只在允许的换行点进行换行。 none 不换行。元素无法容纳的文本会溢出。 unrestricted在任意两个字符间换行。 suppress 压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。 |
| word-break | 规定非中日韩文本的换行规则。 | word-break:break-all | 属性值： normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 |
| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。 | word-wrap:break-word; | 属性值： normal 只在允许的断字点换行（浏览器保持默认处理） break-word 在长单词或 URL 地址内部进行换行 |
其他常见用法
多行文本超出用省略号代替限制行数
{
overflow:hidden;//必须的
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 3; /*限制在一个块元素显示的文本的行数*/
-webkit-box-orient: vertical;
text-overflow:ellipsis;
}
