css文本属性

1. letter-spacing,word-spacing,white-space的区别

letter-spacing指字母间距，对英文和汉字，空格都有效，也可以叫字符间距。

word-spacing指单词间距，对汉字不支持。

white-space指空白和换行的处理。有以下几个值

序号	名称	说明
1	normal	压缩空白和换行符，排满时换行
2	nowrap	压缩空白和换行符，排满也不换行
3	pre	不压缩空白和换行符，排满不换行
4	pre-line	不压缩空白和换行符，排满不换行
5	pre-wrap	不压缩空白和换行符，排满换行

<p>
    hello     world hello you hello me hello !!!
    hello     world hello you hello me hello !!!
    hello     world hello you hello me hello !!!
    hello     world hello you hello me hello !!!
</p>

normal时的效果：压缩空白和换行符，排满换行。

nowrap时的效果：压缩空白和换行符，排满不换行。

pre时的效果：不压缩空白和换行符，排满不换行。

pre-line时的效果：压缩空白，不压缩换行符，排满换行。

pre-wrap时的效果：不压缩空白和换行符，排满换行。

2. word-break,word-wrap的区别

word-wrap处理单词内是否换行。word-break处理单词是否换行。

<p class=word>
    hello world aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>

默认情况：

word-wrap: break-word;时

word-break: break-all;时：

3. text-overflow的使用

单行时：

p{
    border: 1px solid red;
    width: 100px;
    height: 20px;
    line-height: 20px;
    text-align: center;

    text-overflow: ellipsis;/*重点1*/
    overflow: hidden;/*重点2*/
    white-space: nowrap;/*重点3*/
}

多行时：只支持webkit的浏览器，火狐和ie都不支持。

p.muti{
    width: 200px;
    border: 1px solid red;

    text-overflow: ellipsis;
    overflow: hidden; 

    display: -webkit-box; /**对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 2; /** 显示的行数 **/
}

4. text-shadow的使用

text-shadow: 3px 2px 1px gray;

3px:横向长度，可为负值，向右为正。
2px:纵向长度，可为负值，向下为正。
1px:阴影的模糊长度。
gray:阴影颜色。

可叠加，代码如下：

text-shadow: 1px 3px 1px gray,2px 3px 1px red,3px 3px 1px maroon;

效果：

5. text-stroke的使用

text-stroke由text-stroke-color和text-stroke-width组成。下面是简写形式：

-webkit-text-stroke: 1px red;

效果：

目前支持情况不太乐观

查看支持情况的网址：caniuse.com

使用text-shadow也可以实现描边效果：

h1.shadow{text-shadow:-0.025em -0.025em 0 #f00,
        0.025em -0.025em 0 #f00,
        -0.025em 0.025em 0 #f00,
        0.025em 0.025em 0 #f00;}

原理是在文字的上下左右加阴影。

6. text-fill-color的使用

有了文字描边，就有文字填充色。和text-stroke配合使用，支持情况也一样。

 h1.stroke{
    color: black; /*不起作用*/
    -webkit-text-stroke: 1px red;
    -webkit-text-fill-color:transparent;
}

效果：

还可以和渐变背景色配合使用：

 h1.textStroke1{
    background:linear-gradient(90deg, #EEF85B 5%, #7AEC8D 53%, #09E5C3 91%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:#fff;
    -webkit-text-stroke:6px transparent;
 }

效果：