css文本屬性

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

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

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

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

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

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

序號	名稱	說明
1	normal	壓縮空白和換行符，排滿時換行
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時的效果：壓縮空白和換行符，排滿換行。

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

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

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

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

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

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

hello world aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

默認(rèn)情況：

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; /** 設(shè)置或檢索伸縮盒對象的子元素的排列方式 **/
    -webkit-line-clamp: 2; /** 顯示的行數(shù) **/
}

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;

效果：

目前支持情況不太樂觀

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

使用text-shadow也可以實現(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;
 }

效果：