css文本屬性

Tony_Zby 發布于2019-08-30 15:53 / 772人閱讀

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

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	不壓縮空白和換行符，排滿換行

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的區別

word-wrap處理單詞內是否換行。word-break處理單詞是否換行。

hello world aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

默認情況：

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

效果：

云服務器 GPU云服務器 css屬性訪問CSS屬性 position屬性，css 獲取CSS屬性值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116549.html

CSS基礎知識整理

摘要：語法基礎語法規則由兩個主要部分構成選擇器以及一條或多條聲明。語法名屬性屬性值屬性屬性值屬性屬性值選擇器選擇器用于描述一組元素的樣式，也叫做類選擇器。后代選則器又稱為包含選擇器，以空格分隔，子元素選擇器只能選擇作為某元素子元素的元素。 1 什么是CSS？ CSS通常稱為CSS樣式表或層疊樣式表（級聯樣式表），主要用于設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高...

Edison 2019-08-30 11:09 評論0 收藏0
圖解CSS3讀書筆記文本與顏色

摘要：將內容在邊界內換行不截斷英文單詞換行語法瀏覽器只在半角空格或連字符的地方進行換行。個人感覺跟類似強行截斷英文單詞，達到詞內換行效果。 CSS3文本 css字體類型屬性 font-family, font-style(normal、italic、oblique[傾斜]), font-weight, font-size-adjust(定義是否強制對文本使用同一尺寸,僅火狐支持), font...

lvzishen 2019-08-28 18:26 評論0 收藏0
css實現單行、多行文本超出顯示省略號

摘要：前言項目中我們經常遇到這種需求，需要對單行多行文本超出顯示為省略號。單行文本省略文本溢出顯示省略號文本不會換行語法默認值適用于所有元素當對象內文本溢出時不顯示省略標記，而是將溢出的部分裁切掉。前言：項目中我們經常遇到這種需求，需要對單行、多行文本超出顯示為省略號。這篇文章主要總結了小編解決此問題的方法，有不足之處歡迎大家指正。單行文本省略 showImg(https://segme...

wing324 2019-08-02 12:05 評論0 收藏0
css實現單行、多行文本超出顯示省略號

摘要：前言項目中我們經常遇到這種需求，需要對單行多行文本超出顯示為省略號。單行文本省略文本溢出顯示省略號文本不會換行語法默認值適用于所有元素當對象內文本溢出時不顯示省略標記，而是將溢出的部分裁切掉。前言：項目中我們經常遇到這種需求，需要對單行、多行文本超出顯示為省略號。這篇文章主要總結了小編解決此問題的方法，有不足之處歡迎大家指正。單行文本省略 showImg(https://segme...

paulquei 2019-08-29 17:20 評論0 收藏0
css實現單行、多行文本超出顯示省略號

摘要：前言項目中我們經常遇到這種需求，需要對單行多行文本超出顯示為省略號。單行文本省略文本溢出顯示省略號文本不會換行語法默認值適用于所有元素當對象內文本溢出時不顯示省略標記，而是將溢出的部分裁切掉。前言：項目中我們經常遇到這種需求，需要對單行、多行文本超出顯示為省略號。這篇文章主要總結了小編解決此問題的方法，有不足之處歡迎大家指正。單行文本省略 showImg(https://segme...

maxmin 2019-08-26 13:24 評論0 收藏0