縮進(jìn)文本

把 Web 頁面上的段落的第一行縮進(jìn)，這是一種最常用的文本格式化效果。

CSS 提供了 text-indent 屬性，該屬性可以方便地實(shí)現(xiàn)文本縮進(jìn)。

通過使用 text-indent 屬性，所有元素的第一行都可以縮進(jìn)一個(gè)給定的長度，甚至該長度可以是負(fù)值。

這個(gè)屬性最常見的用途是將段落的首行縮進(jìn)，下面的規(guī)則會(huì)使所有段落的首行縮進(jìn) 5 em：

p {text-indent: 5em;}

注意：一般來說，可以為所有塊級(jí)元素應(yīng)用 text-indent，但無法將該屬性應(yīng)用于行內(nèi)元素，圖像之類的替換元素上也無法應(yīng)用 text-indent 屬性。不過，如果一個(gè)塊級(jí)元素（比如段落）的首行中有一個(gè)圖像，它會(huì)隨該行的其余文本移動(dòng)。

提示：如果想把一個(gè)行內(nèi)元素的第一行“縮進(jìn)”，可以用左內(nèi)邊距或外邊距創(chuàng)造這種效果。

使用負(fù)值

text-indent 還可以設(shè)置為負(fù)值。利用這種技術(shù)，可以實(shí)現(xiàn)很多有趣的效果，比如“懸掛縮進(jìn)”，即第一行懸掛在元素中余下部分的左邊：

p {text-indent: -5em;}

不過在為 text-indent 設(shè)置負(fù)值時(shí)要當(dāng)心，如果對(duì)一個(gè)段落設(shè)置了負(fù)值，那么首行的某些文本可能會(huì)超出瀏覽器窗口的左邊界。為了避免出現(xiàn)這種顯示問題，建議針對(duì)負(fù)縮進(jìn)再設(shè)置一個(gè)外邊距或一些內(nèi)邊距：

p {text-indent: -5em; padding-left: 5em;}

使用百分比值

text-indent 可以使用所有長度單位，包括百分比值。

百分?jǐn)?shù)要相對(duì)于縮進(jìn)元素父元素的寬度。換句話說，如果將縮進(jìn)值設(shè)置為 20%，所影響元素的第一行會(huì)縮進(jìn)其父元素寬度的 20%。

在下例中，縮進(jìn)值是父元素的 20%，即 100 個(gè)像素：

div {width: 500px;}
p {text-indent: 20%;}

<div>
<p>this is a paragragh</p>
</div>

繼承

text-indent 屬性可以繼承，請(qǐng)考慮如下標(biāo)記：

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}

<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>

以上標(biāo)記中的段落也會(huì)縮進(jìn) 50 像素，這是因?yàn)檫@個(gè)段落繼承了 id 為 inner 的 div 元素的縮進(jìn)值。

水平對(duì)齊

text-align 是一個(gè)基本的屬性，它會(huì)影響一個(gè)元素中的文本行互相之間的對(duì)齊方式。它的前 3 個(gè)值相當(dāng)直接，不過第 4 個(gè)和第 5 個(gè)則略有些復(fù)雜。

值 left、right 和 center 會(huì)導(dǎo)致元素中的文本分別左對(duì)齊、右對(duì)齊和居中。

西方語言都是從左向右讀，所有 text-align 的默認(rèn)值是 left。文本在左邊界對(duì)齊，右邊界呈鋸齒狀（稱為“從左到右”文本）。對(duì)于希伯來語和阿拉伯語之類的的語言，text-align 則默認(rèn)為 right，因?yàn)檫@些語言從右向左讀。不出所料，center 會(huì)使每個(gè)文本行在元素中居中。

提示：將塊級(jí)元素或表元素居中，要通過在這些元素上適當(dāng)?shù)卦O(shè)置左、右外邊距來實(shí)現(xiàn)。

text-align:center 與 <CENTER>

您可能會(huì)認(rèn)為 text-align:center 與 <CENTER> 元素的作用一樣，但實(shí)際上二者大不相同。

<CENTER> 不僅影響文本，還會(huì)把整個(gè)元素居中。text-align 不會(huì)控制元素的對(duì)齊，而只影響內(nèi)部內(nèi)容。元素本身不會(huì)從一段移到另一端，只是其中的文本受影響。

justify

最后一個(gè)水平對(duì)齊屬性是 justify。

在兩端對(duì)齊文本中，文本行的左右兩端都放在父元素的內(nèi)邊界上。然后，調(diào)整單詞和字母間的間隔，使各行的長度恰好相等。您也許已經(jīng)注意到了，兩端對(duì)齊文本在打印領(lǐng)域很常見。

需要注意的是，要由用戶代理（而不是 CSS）來確定兩端對(duì)齊文本如何拉伸，以填滿父元素左右邊界之間的空間。如需了解詳情，請(qǐng)參閱 CSS text-align 屬性參考頁。

字間隔

word-spacing 屬性可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔。其默認(rèn)值 normal 與設(shè)置值為 0 是一樣的。

word-spacing 屬性接受一個(gè)正長度值或負(fù)長度值。如果提供一個(gè)正長度值，那么字之間的間隔就會(huì)增加。為 word-spacing 設(shè)置一個(gè)負(fù)值，會(huì)把它拉近：

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}

<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>

<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

實(shí)例 TIY ：增加或減少單詞間距（字間隔）

注釋：如需深入理解 CSS 對(duì)“字”（word）的定義，請(qǐng)?jiān)L問 CSS word-spacing 屬性參考頁。

字母間隔

letter-spacing 屬性與 word-spacing 的區(qū)別在于，字母間隔修改的是字符或字母之間的間隔。

與 word-spacing 屬性一樣，letter-spacing 屬性的可取值包括所有長度。默認(rèn)關(guān)鍵字是 normal（這與 letter-spacing:0 相同）。輸入的長度值會(huì)使字母之間的間隔增加或減少指定的量：

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}

<h1>This is header 1</h1>
<h4>This is header 4</h4>

實(shí)例 TIY ：規(guī)定字符間距（字母間隔）

字符轉(zhuǎn)換

text-transform 屬性處理文本的大小寫。這個(gè)屬性有 4 個(gè)值：

• none
• uppercase
• lowercase
• capitalize

默認(rèn)值 none 對(duì)文本不做任何改動(dòng)，將使用源文檔中的原有大小寫。顧名思義，uppercase 和 lowercase 將文本轉(zhuǎn)換為全大寫和全小寫字符。最后，capitalize 只對(duì)每個(gè)單詞的首字母大寫。

作為一個(gè)屬性，text-transform 可能無關(guān)緊要，不過如果您突然決定把所有 h1 元素變?yōu)榇髮懀�這個(gè)屬性就很有用。不必單獨(dú)地修改所有 h1 元素的內(nèi)容，只需使用 text-transform 為你完成這個(gè)修改：

h1 {text-transform: uppercase}

使用 text-transform 有兩方面的好處。首先，只需寫一個(gè)簡單的規(guī)則來完成這個(gè)修改，而無需修改 h1 元素本身。其次，如果您以后決定將所有大小寫再切換為原來的大小寫，可以更容易地完成修改。

實(shí)例 TIY ：控制文本中字母的大小寫

文本裝飾

接下來，我們討論 text-decoration 屬性，這是一個(gè)很有意思的屬性，它提供了很多非常有趣的行為。

text-decoration 有 5 個(gè)值：

• none
• underline
• overline
• line-through
• blink

不出所料，underline 會(huì)對(duì)元素加下劃線，就像 HTML 中的 U 元素一樣。overline 的作用恰好相反，會(huì)在文本的頂端畫一個(gè)上劃線。值 line-through 則在文本中間畫一個(gè)貫穿線，等價(jià)于 HTML 中的 S 和 strike 元素。blink 會(huì)讓文本閃爍，類似于 Netscape 支持的頗招非議的 blink 標(biāo)記。

none 值會(huì)關(guān)閉原本應(yīng)用到一個(gè)元素上的所有裝飾。通常，無裝飾的文本是默認(rèn)外觀，但也不總是這樣。例如，鏈接默認(rèn)地會(huì)有下劃線。如果您希望去掉超鏈接的下劃線，可以使用以下 CSS 來做到這一點(diǎn)：

a {text-decoration: none;}

注意：如果顯式地用這樣一個(gè)規(guī)則去掉鏈接的下劃線，那么錨與正常文本之間在視覺上的唯一差別就是顏色（至少默認(rèn)是這樣的，不過也不能完全保證其顏色肯定有區(qū)別）。

還可以在一個(gè)規(guī)則中結(jié)合多種裝飾。如果希望所有超鏈接既有下劃線，又有上劃線，則規(guī)則如下：

a:link a:visited {text-decoration: underline overline;}

不過要注意的是，如果兩個(gè)不同的裝飾都與同一元素匹配，勝出規(guī)則的值會(huì)完全取代另一個(gè)值。請(qǐng)考慮以下的規(guī)則：

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

對(duì)于給定的規(guī)則，所有 class 為 stricken 的 h2 元素都只有一個(gè)貫穿線裝飾，而沒有下劃線和上劃線，因?yàn)?text-decoration 值會(huì)替換而不是累積起來。

處理空白符

white-space 屬性會(huì)影響到用戶代理對(duì)源文檔中的空格、換行和 tab 字符的處理。

通過使用該屬性，可以影響瀏覽器處理字之間和文本行之間的空白符的方式。從某種程度上講，默認(rèn)的 XHTML 處理已經(jīng)完成了空白符處理：它會(huì)把所有空白符合并為一個(gè)空格。所以給定以下標(biāo)記，它在 Web 瀏覽器中顯示時(shí)，各個(gè)字之間只會(huì)顯示一個(gè)空格，同時(shí)忽略元素中的換行：

<p>This     paragraph has    many
    spaces           in it.</p>

可以用以下聲明顯式地設(shè)置這種默認(rèn)行為：

p {white-space: normal;}

上面的規(guī)則告訴瀏覽器按照平常的做法去處理：丟掉多余的空白符。如果給定這個(gè)值，換行字符（回車）會(huì)轉(zhuǎn)換為空格，一行中多個(gè)空格的序列也會(huì)轉(zhuǎn)換為一個(gè)空格。

實(shí)例 TIY ：white-space: normal

值 pre

不過，如果將 white-space 設(shè)置為 pre，受這個(gè)屬性影響的元素中，空白符的處理就有所不同，其行為就像 XHTML 的 pre 元素一樣；空白符不會(huì)被忽略。

如果 white-space 屬性的值為 pre，瀏覽器將會(huì)注意額外的空格，甚至回車。在這個(gè)方面，而且僅在這個(gè)方面，任何元素都可以相當(dāng)于一個(gè) pre 元素。

實(shí)例 TIY ：white-space: pre

注意：經(jīng)測(cè)試，IE 7 以及更早版本的瀏覽器不支持該值，因此請(qǐng)使用非 IE 的瀏覽器來查看上面的實(shí)例。

值 nowrap

與之相對(duì)的值是 nowrap，它會(huì)防止元素中的文本換行，除非使用了一個(gè) br 元素。在 CSS 中使用 nowrap 非常類似于 HTML 4 中用 <td nowrap> 將一個(gè)表單元格設(shè)置為不能換行，不過 white-space 值可以應(yīng)用到任何元素。

實(shí)例 TIY ：white-space: nowrap

值 pre-wrap 和 pre-line

CSS2.1 引入了值 pre-wrap 和 pre-line，這在以前版本的 CSS 中是沒有的。這些值的作用是允許創(chuàng)作人員更好地控制空白符處理。

如果元素的 white-space 設(shè)置為 pre-wrap，那么該元素中的文本會(huì)保留空白符序列，但是文本行會(huì)正常地?fù)Q行。如果設(shè)置為這個(gè)值，源文本中的行分隔符以及生成的行分隔符也會(huì)保留。pre-line 與 pre-wrap 相反，會(huì)像正常文本中一樣合并空白符序列，但保留換行符。

實(shí)例 TIY ：white-space: pre-wrap

實(shí)例 TIY ：white-space: pre-line

注意：我們?cè)?IE7 和 FireFox2.0 瀏覽器中測(cè)試了上面的兩個(gè)實(shí)例，但是結(jié)果是，值 pre-wrap 和 pre-line 都沒有得到很好的支持。

總結(jié)

下面的表格總結(jié)了 white-space 屬性的行為：

值	空白符	換行符	自動(dòng)換行
pre-line	合并	保留	允許
normal	合并	忽略	允許
nowrap	合并	忽略	不允許
pre	保留	保留	不允許
pre-wrap	保留	保留	允許

文本方向

如果您閱讀的是英文書籍，就會(huì)從左到右、從上到下地閱讀，這就是英文的流方向。不過，并不是所有語言都如此。我們知道古漢語就是從右到左來閱讀的，當(dāng)然還包括希伯來語和阿拉伯語等等。CSS2 引入了一個(gè)屬性來描述其方向性。

direction 屬性影響塊級(jí)元素中文本的書寫方向、表中列布局的方向、內(nèi)容水平填充其元素框的方向、以及兩端對(duì)齊元素中最后一行的位置。

注釋：對(duì)于行內(nèi)元素，只有當(dāng) unicode-bidi 屬性設(shè)置為 embed 或 bidi-override 時(shí)才會(huì)應(yīng)用 direction 屬性。

direction 屬性有兩個(gè)值：ltr 和 rtl。大多數(shù)情況下，默認(rèn)值是 ltr，顯示從左到右的文本。如果顯示從右到左的文本，應(yīng)使用值 rtl。

CSS 文本屬性

屬性	描述
color	設(shè)置文本顏色
direction	設(shè)置文本方向。
line-height	設(shè)置行高。
letter-spacing	設(shè)置字符間距。
text-align	對(duì)齊元素中的文本。
text-decoration	向文本添加修飾。
text-indent	縮進(jìn)元素中文本的首行。
text-shadow	設(shè)置文本陰影。CSS2 包含該屬性，但是 CSS2.1 沒有保留該屬性。
text-transform	控制元素中的字母。
unicode-bidi	設(shè)置文本方向。
white-space	設(shè)置元素中空白的處理方式。
word-spacing	設(shè)置字間距。