CSS3 对文本的基本设置大全

 color属性：设置文本文字颜色。用法如下：

    color：颜色值;

    color属性可以设置的合法颜色值包括：16进制颜色值（例：#ffffff），rgb颜色值【例：rgb(0,0,0)】，rgba颜色值【例：rgb(0,0,0,0.5)，0.5表示透明度】，hsl颜色值【例：hsl(120,65%,75%)】，hsla颜色值【hsl(120,65%,75%,0.3)，0.3表示透明度】。

    2、css文本文字行高（行间距）的属性

    line-height属性：设置行间的距离（行高）。用法如下：

    line-height：值;

    具体cssline-height属性是如何设置文本文字的行间距，大家可以参考之前的文章【css如何设置行间距？css文本文字的行间距设置】，希望对大家有所帮助。

    3、css设置文本文字的水平对齐方式的属性

    text-align属性：设置元素中的文本文字的水平对齐方式。用法如下：

    text-align:left||right||center||justify;

    left：设置文本文字左对齐。默认值：由浏览器决定。

    right：设置文本文字右对齐。

    center：设置文本文字居中对齐。

    justify：实现两端对齐文本效果。

    4、css文本缩进属性

    text-indent属性：设置文本缩进。

    具体csstext-indent属性是怎样设置文本缩进的，大家可以参考【css如何实现首行缩进效果？text-indent属性实现首行缩进】。

    5、设置文本文字装饰效果

    text-decoration属性：定义添加到文本的修饰。

    说明：

    这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。

    用法：

    text-indent：none||[underline(下划线)||overline(上划线)||line-through(中划线)]||blink;

    none：默认值，定义标准的文本。

    underline：定义文本下的一条线。

    overline：定义文本上的一条线。

    line-through：定义穿过文本下的一条线。

    blink：定义闪烁的文本。

    6、文本字符的大小写转换属性

    text-transform属性：控制文本字符的大小写。

    用法：

    text-transform:uppercase(全大写)||lowercase(全小写)||capitalize(首字母大写)||none;

    大家可以参考文章【css如何设置字母的大小写？text-transform属性设置字母的大小写】，里面有具体介绍。

    7、文本文字间距的属性

    word-spacing属性：设置文字或单词之间的间距，单词之间的间距=word-spacing+空格大小。

    letter-spacing属性：设置字母间的间隔。

    大家可以参考文章【css如何设置文字间距？word-spacing属性与letter-spacing属性的简单比较】，里面介绍了word-spacing属性和letter-spacing属性设置文本文字的间距的方法，以及它们的区别。

    8、文本文字阴影的属性

    text-shadow属性：向文本文字设置阴影

     9、超出省略隐藏

    .box{

    text-overflow:ellipsis;

    overflow:hidden;

    white-space:nowrap

}

 10、 text-overflow: clip || ellipsis || string

clip:修剪文本

ellipsis:显示省略符号来代表被修剪的文本。

string:使用给定的字符串来代表被

11、  overflow:hidden || visible || scroll || auto || inherit;

visible :默认值。内容不会被修剪，会呈现在元素框之外。

hidden:内容会被修剪，并且其余内容是不可见的。

scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit:规定应该从父元素继承 overflow 属性的值。

12、white-space:  normal || pre || nowrap || pre-wrap || pre-line || inherit

normal：默认。空白会被浏览器忽略。

pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap ：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

pre-wrap ：保留空白符序列，但是正常地进行换行。

pre-line ： 合并空白符序列，但是保留换行符。

inherit ：规定应该从父元素继承 white-space 属性的值。

    .box {

       display: -webkit-box;
       -webkit-line-clamp: 1;/*控制显示的行数*/
       overflow: hidden;
       -webkit-box-orient: vertical;
       text-overflow: ellipsis;
    }