css文本屬性

Tony_Zby 發(fā)布于2019-08-30 15:53 / 779人閱讀

摘要：的區(qū)別指字母間距，對(duì)英文和漢字，空格都有效，也可以叫字符間距。指單詞間距，對(duì)漢字不支持。時(shí)的效果壓縮空白和換行符，排滿不換行。縱向長(zhǎng)度，可為負(fù)值，向下為正。陰影的模糊長(zhǎng)度。的使用有了文字描邊，就有文字填充色。

1. letter-spacing,word-spacing,white-space的區(qū)別

letter-spacing指字母間距，對(duì)英文和漢字，空格都有效，也可以叫字符間距。

word-spacing指單詞間距，對(duì)漢字不支持。

white-space指空白和換行的處理。有以下幾個(gè)值

序號(hào)	名稱	說(shuō)明
1	normal	壓縮空白和換行符，排滿時(shí)換行
2	nowrap	壓縮空白和換行符，排滿也不換行
3	pre	不壓縮空白和換行符，排滿不換行
4	pre-line	不壓縮空白和換行符，排滿不換行
5	pre-wrap	不壓縮空白和換行符，排滿換行

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 !!!

normal時(shí)的效果：壓縮空白和換行符，排滿換行。

nowrap時(shí)的效果：壓縮空白和換行符，排滿不換行。

pre時(shí)的效果：不壓縮空白和換行符，排滿不換行。

pre-line時(shí)的效果：壓縮空白，不壓縮換行符，排滿換行。

pre-wrap時(shí)的效果：不壓縮空白和換行符，排滿換行。

2. word-break,word-wrap的區(qū)別

word-wrap處理單詞內(nèi)是否換行。word-break處理單詞是否換行。

hello world aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

默認(rèn)情況：

word-wrap: break-word;時(shí)

word-break: break-all;時(shí)：

3. text-overflow的使用

單行時(shí)：

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

    text-overflow: ellipsis;/*重點(diǎn)1*/
    overflow: hidden;/*重點(diǎn)2*/
    white-space: nowrap;/*重點(diǎn)3*/
}

多行時(shí)：只支持webkit的瀏覽器，火狐和ie都不支持。

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

    text-overflow: ellipsis;
    overflow: hidden; 

    display: -webkit-box; /**對(duì)象作為伸縮盒子模型顯示 **/
    -webkit-box-orient: vertical; /** 設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 **/
    -webkit-line-clamp: 2; /** 顯示的行數(shù) **/
}

4. text-shadow的使用

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

3px:橫向長(zhǎng)度，可為負(fù)值，向右為正。
2px:縱向長(zhǎng)度，可為負(fù)值，向下為正。
1px:陰影的模糊長(zhǎng)度。
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組成。下面是簡(jiǎn)寫形式：

-webkit-text-stroke: 1px red;

效果：

目前支持情況不太樂(lè)觀

查看支持情況的網(wǎng)址：caniuse.com

使用text-shadow也可以實(shí)現(xiàn)描邊效果：

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;
 }

效果：