一、文本樣式

?首行縮進(jìn)　　text-indent

　　首行縮進(jìn)是將段落的第一行縮進(jìn)，這是常用的文本格式化效果。一般地，中文寫作時開頭空兩格。[注意]該屬性可以為負(fù)值；應(yīng)用于: 塊級元素(包括block和inline-block)　

<div><p style="text-indent: 2em">亞冠聯(lián)賽是亞洲最高等級的俱樂部賽事</p><p>相當(dāng)于歐洲的歐洲冠軍聯(lián)賽及南美洲的南美解放者杯</p></div>

字間隔 ?word-spacing

　　字間隔是指單詞間距，用來設(shè)置文字或單詞之間的間距。[注意]字間隔可為負(fù)值；單詞之間的間距 = word-spacing 空格大小；必須加空格才生效

<div><div style="width: 100px;">購買數(shù)量：</div><div style="width: 100px;word-spacing: 27px">運(yùn) 費：</div></div>

字母間隔?letter-spacing

　　字母間隔是指字符間距，[注意]字母間隔可為負(fù)值

<div style="width: 200px;letter-spacing: 5px">購買數(shù)量：</div>

文本轉(zhuǎn)換　text-transform

　　文本轉(zhuǎn)換用于處理英文的大小寫轉(zhuǎn)換

　　值: uppercase(全大寫) | lowercase(全小寫) | capitalize(首字母大寫) | none | inherit

　　初始值: none

<div style="text-transform: uppercase">test one</div>

文本修飾　text-decoration

　　文本修飾用于為文本提供修飾線　　[注意]文本修飾線的顏色與文本顏色相同

　　值: none | [underline(下劃線) || overline(上劃線) || line-through(中劃線)] | inherit

　　初始值: none

<div style="text-decoration: underline">test one</div>

?空白符　　white-space

　　空白符是指空格、制表符和回車；HTML默認(rèn)已經(jīng)把所有空白符合并成一個空格

white-space

　　值: normal | nowrap | pre | pre-wrap | pre-line | inherit

　　初始值: normal

normal: 合并空白符，允許自動換行 nowrap: 合并空白符，不允許自動換行 pre-line: 合并空白符(不包括換行符)，允許自動換行 pre: 不合并空白符，不允許自動換行 pre-wrap: 不合并空白符，允許自動換行(在pre基礎(chǔ)上，保留自動換行) <div style="width: 200px;white-space: nowrap">They can stay 72-hourswithin the Shandong province after they have entered China via the Qingdao International Airport.</div>

?

文本換行　word-wrap

　　瀏覽器自身帶有文本自動換行的功能，文本容器的右側(cè)可以實現(xiàn)自動換行

　　對于英文來說，瀏覽器會在半角空格或連字符的地方自動換行，而不會在單詞的中間突然換行

　　對于中文來說，可以在任何一個文字后面換行，但瀏覽器碰到標(biāo)點符號時，通常將標(biāo)點符號以及其前一個文字作為一個整體進(jìn)行換行。

word-wrap

　　word-wrap屬性用來實現(xiàn)長單詞或URL地址的自動換行

　　值: normal | break-word

　　初始值: normal

word-wrap:normal(瀏覽器只在半角空格或連字符的地方進(jìn)行換行) word-wrap:break-word(截斷單詞換行，長單詞從下一行開始)

　　[注意]當(dāng)white-space的值是nowrap或pre時，word-break和word-wrap屬性都失效

<div style="width: 50px; word-wrap: break-word">abcfffffffffffffffffffjkl</div>

?不加的時候　　　　　　　　　　　　加了的時候

　　　　　　??

?

二、文本溢出　　text-overflow

<div class="text">長英文fffffffffffffffffff</div> .text{width: 80px;background: red;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

不加的時候　　　　　　　　　　加了的時候

??　　　　

?

三、文本陰影　　text-shadow

　　類似于盒子陰影，文本陰影也有x軸偏移、y軸偏移、模糊半徑和陰影顏色這四個值，但是并沒有陰影尺寸和內(nèi)部陰影這兩個值

text-shadow

　　值: none | (h-shadow v-shadow blur color)

　　初始值: none

h-shadow: 水平陰影位置(必須) v-shadow: 垂直陰影位置(必須) blur: 模糊距離(該值不能為負(fù)值，可選) color: 陰影顏色，默認(rèn)和文本顏色一致(可選) <div class="text">測試文字</div> .text{width: 100px;height: 100px;text-shadow: 2px 2px 3px green;}

?

?

總結(jié)

以上是生活随笔為你收集整理的css渲染（二） 文本的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。