前端基础篇：CSS文本属性集合

一、字体属性

Copy
font-family：‘微软雅黑’  指定字体Css属性设置样式
font-size: 12px/em/rem
font-weight:normal;
font-style:设置字体倾斜，可能的属性有normal、italic、oblique;
line-height:设置字体的行间距;
color:red 字体颜色

二、文本属性

Copy
text-align:控制文本的对齐方式
text-indent :控制文本首行的缩进，px或%都可；

white-space:文档中的空白处
         属性值: noraml: 默认忽略多个空格,只输出一个空格 .
                nowrap: 强制不换行
                pre:空格/缩进/换行 会给保留
                pre-line:合并空表(多个空格只会输出一个空格)
                pre-warp:保留空白/缩进,正常换行 ;
letter-spacing:控制字母之间的距离；
text-overflow:当文本溢出包含元素时发生的事情；
         属性值: clip  修剪文本。
                ellipsis  显示省略符号来代表被修剪的文本。
                string  使用给定的字符串来代表被修剪的文本。
                word-spacing :控制单词间空格的距离，以空格来区分单词，中英都OK；

三、下划线属性

Copy
text-decoration :控制文本是否有下划线，可能值有
        属性值: none  没有下划线
                overline  定义文本上的一条线。
                line-through  定义穿过文本下的一条线。
                underline  定义文本下的一条线。

四、转换大小写

Copy
text-transform:
          属性值: none(默认) 无转换;
          capitalize:每个单词第一个字母为大写;
          upercase :转换成大写;
          lowercase:转换成小写;

五、边框属性

Copy
border-radius :60px 30px 40px  50px /左上 右上 右下 右左  /50%为圆

六、盒子阴影

Copy
box-shadow:盒子阴影;
//可以有五个值  (h-shadow水平阴影位置，v-shadow垂直阴影位置，blur模糊距离，spread阴影尺寸, color，inset/outset内外阴影 ) 
eg:box-shadow: 10px 5px 10px red inset; 

七、文本超出换行

Copy
Word-warp:允许长单词转换到下一行
Word-break:允许在单词内转行(自动换行)

八、文本摆放形式

Copy
direction: 文字摆放方向
属性值 ltl:从左往右
       rtl:从右往左

九、文字阴影

Copy
text-shadow:参考盒子阴影

十、文本单行超出显示省略号

Copy
{
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
}       

十一、多行文本超出用省略号代替限制行数

Copy
{
   overflow:hidden;
   word-break: break-all;
   display: -webkit-box;
            -webkit-line-clamp: 3; /*限制在一个块元素显示的文本的行数*/
            -webkit-box-orient: vertical;
   text-overflow:ellipsis;

}