文本和之前說的字體有什么區(qū)別呢？文本本身是內(nèi)容，而字體就是用來顯示這個內(nèi)容的。借助text的一系列屬性，可以修改文本的位置，添加下劃線，改變大小寫等等。
縮進(jìn)和內(nèi)聯(lián)對齊
要放在以前，有些網(wǎng)站為了實(shí)現(xiàn)段落開頭的空格，會將空白的圖片放在首字母之前。而有了CSS后就可以直接通過text-indent字段來實(shí)現(xiàn)：
text-indent會在第一行設(shè)置對應(yīng)長度的空白，哪怕設(shè)置的額為負(fù)值：
p {text-indent: 3em;}
一般來說，text-indent對于所有的block元素都是有效的，不能用于inline的元素或是可替代的元素，例如圖片。
另外上面提到還可以設(shè)置負(fù)值，那有什么用呢，來看個例子：
p.hang {text-indent: ?25px;}
<img src="star.gif" style="width: 60px; height: 60px;
float: left;" alt="An image of a five-pointed star."/>
<p class="hang"> This paragraph has a negatively indented first
line, which overlaps the floated image that precedes the text. Subsequent lines do not overlap the image, since they are not indented in any way.</p>
另外需要注意的是縮進(jìn)只針對元素的第一行有效，哪怕你在段落中間添加了換行。而且有意思的是縮進(jìn)是可以繼承的，所以弄得不好就會出現(xiàn)你意想不到的情況：
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">
This first line of the DIV is indented by 50 pixels.
<p>
This paragraph is 200px wide, and the first line of the paragraph is indented 50px. This is because computed values for 'text-indent' are inherited, instead of the declared values.
</p>
</div>
</div>
文本對齊
想必這個大家在平時已經(jīng)用的很多了：
跟之前類似，text-align也是只作用域block元素。那有人問了，文本的排列不是還有垂直布局么，那這個left和right是啥意思呢？left和right其實(shí)是歷史遺留的名稱，在CSS3中已經(jīng)改為start和end。來看下具體的例子：
start和end對齊
在CSS3為text-align添加了一些了的新屬性，而且連默認(rèn)值也換了，從原來的left變成了start。這就非常智能了，完全按照語言的書寫規(guī)范來設(shè)置，一般的從左往右書寫的就是左邊，從右往左書寫的就是右邊，從上到下書寫的就是上邊。另外與start對應(yīng)的就是end，來看個例子：
justify 屬性
justify是調(diào)整的意思，那么將text-align:justify；有什么功能呢？其實(shí)這個調(diào)整指的是文本換行時候的行為，到底是斷開單詞還是換行顯示，那如果選擇換行，是不是要適當(dāng)撐開少單詞那行的單詞間距來保證占滿一行。所以看起來這個調(diào)整跟瀏覽器自身關(guān)系很大，不同瀏覽器對調(diào)整的行為會有不同。
match-parent
這個屬性可能現(xiàn)在瀏覽器還沒有支持，顧名思義就是匹配父元素的的對齊方式。那有人就問啦，這個和inherit有啥區(qū)別么？其實(shí)是有的，舉個例子，如果父元素設(shè)置為start，如果是inherit那么子元素也是start，而match-parent就會進(jìn)行相應(yīng)的計算和判斷，如果是從左往右的書寫方向，那么子元素就設(shè)置為left。
最后一行的對齊設(shè)置
有時候你想要設(shè)置最后一行的對齊方式，那么就可以使用text-align-last這個屬性：
我們來直觀的看個例子：
不過用的時候得注意一個點(diǎn)，什么是最后一行？如果文本中有換行符號，那么換行前的那一行也會認(rèn)為是最后一行。
機(jī)智的小伙伴已經(jīng)注意到了，如果第一行和最后一行是同一行，那怎么辦？答案是text-align-last會替換text-align。像下面這個例子，align的結(jié)果就是center。
p {text-align: start; text-align-last: center;}
inline對齊
行高
當(dāng)把行高應(yīng)用到block元素的時候，其高度設(shè)定的是文本baseline基線間的最小距離，注意這里指的是最小值，而不是一個絕對的值。
下面咱們來考慮下行高的設(shè)置，如果給定的默認(rèn)的normal，那么瀏覽器會自動計算，可能會有出入，不過一般為1.2倍的字體大小。
來看個例子：
body {line-height: 18px; font-size: 16px;}
p.cl1 {line-height: 1.5em;}
p.cl2 {font-size: 10px; line-height: 150%;}
p.cl3 {line-height: 0.33in;}
<p>This paragraph inherits a 'line-height' of 14px from the body, as well as a 'font-size' of 13px.</p>
<p class="cl1">This paragraph has a 'line-height' of 27px(18 * 1.5), so
it will have slightly more line-height than usual.</p>
<p class="cl2">This paragraph has a 'line-height' of 15px (10 * 150%), so it will have slightly more line-height than usual.</p>
<p class="cl3">This paragraph has a 'line-height' of 0.33in, so it will have slightly more line-height than usual.</p>
行高的繼承
有時候咱們會碰到這種情況：
body {font-size: 10px;}
div {line-height: 1em;} /* computes to '10px' */
p {font-size: 18px;}
<div>
<p>This paragraph's 'font-size' is 18px, but the inherited 'line-height' value is only 10px. This may cause the lines of text to overlap each other by a small amount.</p>
</div>
有沒有發(fā)現(xiàn)行高太窄了，因?yàn)閜繼承了父元素div的行高10px，而自己是18px的font-size。這時候該怎么辦呢，可以這樣：
body {font-size: 10px;}
div {line-height: 1;}
p {font-size: 18px;}
行高設(shè)置為一個數(shù)值，其代表的含義就是比例因子，這樣的話p就不會繼承div里的具體行高，而是使用自己font-size來計算得到對應(yīng)的行高。
div {line-height: 1.5;}
p {font-size: 18px;}
<div>
<p>This paragraph's 'font-size' is 18px, and since the 'line-height' set for the parent div is 1.5, the 'line-height' for this paragraph is 27px (18 * 1.5).</p>
</div>
垂直對齊文本
在CSS中，vertical-align屬性只能應(yīng)用于inline的元素和可替代的額元素，例如圖片和表單input，而且vertical-align無法被繼承。
baseline
如果設(shè)置veritcle-align:baseline，就會將對齊方式設(shè)置為基于父元素的baseline基線對齊。萬一對齊的元素沒有基線怎么辦？那就沿用父元素的基線。
img {vertical-align: baseline;}
<p>The image found in this paragraph <img src="dot.gif" alt="A dot" /> has its
bottom edge aligned with the baseline of the text in the paragraph.</p>
上標(biāo)和下標(biāo)
vertical-align: sub將會把內(nèi)容放到低于baseline的位置，至于低多少依賴于瀏覽器的設(shè)置。super正好是sub的對應(yīng)，上標(biāo)，功能類似。
注意，上標(biāo)和下標(biāo)的字體大小是不會默認(rèn)變小的，一般還是繼承自父元素。
span.raise {vertical-align: super;}
span.lower {vertical-align: sub;}
<p>This paragraph contains <span class="raise">superscripted</span> and <span class="lower">subscripted</span> text.
</p>
bottom選項(xiàng)
bottom指的是inline box的底部，來看個例子：
.feeder {vertical-align: bottom;}
<p>This paragraph, as you can see quite clearly, contains
a <img src="tall.gif" alt="tall" class="feeder" /> image and a <img src="short.gif" alt="short" class="feeder" /> image, and then some text that is not tall.</p>
上面咱們看到的是bottom字段，而其實(shí)，verticle-align：text-bottom也是一種底部對齊，而這個對齊的是文本的底部：
img.tbot {vertical-align: text-bottom;}
<p>Here: a <img src="tall.gif" style="vertical-align: middle;" alt="tall" />
image, and then a <img src="short.gif" class="tbot" alt="short" /> image.</p>
top
top其實(shí)是bottom的對立面,而text-top則是text-bottom的對立面：
.up {vertical-align: top;}
.textup {vertical-align: text-top;}
<p>Here: a <img src="tall.gif" alt="tall image"> tall image, and then
<span class="up">some text</span> that's been vertically aligned.</p>
<p>Here: a <img src="tall.gif" class="textup" alt="tall"> image that's been vertically aligned, and then a <img src="short.gif" class="textup" alt="short" /> image that's similarly aligned.</p>
middle
middle選項(xiàng)主要用于圖片，而且也不是你想像中的居中，圖片的中線位于1/4em到1/2em的中間：
很多瀏覽器將1ex設(shè)置為1/2em，不過并不是全部。
百分比
有人很好奇，對齊的百分比賦值是做什么用的，參考的標(biāo)準(zhǔn)又是什么？其實(shí)這個百分比是用來調(diào)整基線的，而標(biāo)準(zhǔn)則參考父元素的基線。而在數(shù)值上，100%代表的是當(dāng)前元素的行高。正值抬高元素，負(fù)值降低元素。
sub {vertical-align: ?100%;}
sup {vertical-align: 100%;}
<p>We can either <sup>soar to new heights</sup> or, instead, <sub>sink into despair...</sub></p>
設(shè)置具體長度
例如verticle-align: 5px，這一操作將會將元素抬升5px，反之亦然。
Word Spacing 和 Letter Spacing
word-space屬性
該屬性用于調(diào)整單詞內(nèi)部的間距，所以默認(rèn)值為0。
正值拉寬，而負(fù)值縮短間距：
p.spread {word-spacing: 0.5em;}
p.tight {word-spacing: ?0.5em;}
p.base {word-spacing: normal;}
p.norm {word-spacing: 0;}
<p class="spread">The spaces between words in this paragraph will be increased by 0.5em.</p>
<p class="tight">The spaces between words in this paragraph will be decreased by 0.5em.</p>
<p class="base">The spaces between words in this paragraph will be normal.</p> <p class="norm">The spaces between words in this paragraph will be normal.</p>
letter-spacing
該屬性的間隔指的是一個word單詞里面的字母間的間距。
p {letter-spacing: 0;} /* identical to 'normal' */
p.spacious {letter-spacing: 0.25em;}
p.tight {letter-spacing: ?0.25em;}
<p>The letters in this paragraph are spaced as normal.</p>
<p class="spacious">The letters in this paragraph are spread out a bit.</p>
<p class="tight">The letters in this paragraph are a bit smashed together.</p>
另外值得注意的是word-spacing的屬性可能會受到text-align的影響，比如text-align設(shè)置為justified，那么元素的間距就會自動計算。
文本轉(zhuǎn)換
通過該屬性可以將文本轉(zhuǎn)換為大寫uppercase，小寫lowercase，或者首字母大寫capitalize?？磦€例子：
h1 {text-transform: capitalize;}
strong {text-transform: uppercase;}
p.cummings {text-transform: lowercase;}
p.raw {text-transform: none;}
<h1>The heading-one at the beginninG</h1>
<p> By default, text is displayed in the capitalization it has in the source document, but <strong>it is possible to change this</strong> using
the property 'text-transform'.
</p>
<p class="cummings">
For example, one could Create TEXT such as might have been Written by
the late Poet e.e.cummings.
</p>
<p class="raw">
If you feel the need to Explicitly Declare the transformation of text
to be 'none', that can be done as well.
</p>
文本修飾
在多個選項(xiàng)中，underline和overline是一組，分別在底部和頂部添加line，而line-through顧名思義就是在中間加黑線，類似刪除的意思。blink就是閃爍的，比較少見，需要瀏覽器支持。
p.emph {text-decoration: underline;}
p.topper {text-decoration: overline;}
p.old {text-decoration: line-through;}
p.annoy {text-decoration: blink;}
p.plain {text-decoration: none;}
元素默認(rèn)都是none的情況，不添加任何裝飾，不過也有例外，超鏈接a就會自帶下劃線，當(dāng)然可以通過設(shè)置樣式來去除：
a {text-decoration: none;}
奇怪的裝飾
注意text-decoration是不繼承的，所以有時候子元素的裝飾會被父元素所遮蓋：
p {text-decoration: underline; color: black;}
strong {color: gray;}
<p>This paragraph, which is black and has a black underline, also contains <strong>strongly emphasized text</strong> which has the black underline beneath
it as well.</p>
文本渲染
text-rendering是最近才添加的屬性，主要用于部分瀏覽器支持SVG的特性。
數(shù)值optimizeSpeed和optimizeLegibility，顧名思義，代表的是優(yōu)化的兩個方向，一個速度，一個可讀性。由于是新屬性，所以很多依賴瀏覽器的實(shí)現(xiàn)：
另一個數(shù)值geometricPrecision，指導(dǎo)瀏覽器側(cè)重畫出最精細(xì)的文本圖案。
文本陰影
文本陰影的默認(rèn)設(shè)置就是一個顏色，后面跟三個可選的長度值，前兩個長度定義水平和垂直方向的偏移量。來看幾個例子：
text-shadow: green 5px 0.5em;
text-shadow: rgb(128,128,255) ?5px ?0.5em;
剛上面忘說了第三個長度，定義的是模糊半徑（blur radius,學(xué)過ps的可能很清楚）。不過具體的模糊算法依賴瀏覽器的實(shí)現(xiàn)：
p.cl1 {color: black; text-shadow: gray 2px 2px 4px;}
p.cl2 {color: white; text-shadow: 0 0 4px black;}
p.cl3 {color: black; text-shadow: 1em 0.5em 5px red, ?0.5em ?1em hsla(100,75%,
25%,0.33);}
處理空白
空白的處理很重要，涉及瀏覽器處理空格space，換行和tab。
默認(rèn)的XHTML其實(shí)也有處理這塊，它的處理規(guī)則是將所有的空格都縮短至1個空格，比如：
<p>This paragraph has many spaces in it.</p>
顯示出來就是正常的，就等于p{white-space:normal}，那如果想要保留空格怎么辦，可以使用pre：
p {white-space: pre;}
<p>This paragraph has many spaces in it.</p>
而和pre相對的就是nowrap，堅決不讓元素?fù)Q行，除非使用了
。
<p style="white-space: nowrap;">This paragraph is not allowed to wrap, which means that the only way to end a line is to insert a line-break element. If no such element is inserted, then the line will go forever, forcing the user to scroll horizontally to read whatever can't be initially displayed <br/>in the browser window.</p>
CSS2.1中引入了pre-wrap和pre-line,目的就是更好的控制空格的處理。那這兩個有什么區(qū)別呢？pre-wrap在pre的基礎(chǔ)上支持文本中的換行，而pre-line就會把空格都縮短到1個，但支持換行，來看個例子：
<p style="white-space: pre-wrap;">
This paragraph has a great many s p a c e s within its textual
content, but their preservation will not prevent line
wrapping or line breaking.
</p>
<p style="white-space: pre-line;">
This paragraph has a great many s p a c e s within its textual content, but their collapse will not prevent line
wrapping or line breaking.
</p>
設(shè)置tab的大小
默認(rèn)來說，tab的字符就默認(rèn)設(shè)置為8個空格。如果給的是具體的長度，那么就會用具體的數(shù)值來代替，比如tab-size: 10px
換行 和 斷字
有時候一行單詞特別多，就需要設(shè)置斷字：
幾個選項(xiàng)中最有意思的就屬auto了，允許瀏覽器自動插入橫杠的斷字符，不過關(guān)于如果斷字，或者說在那種情況下是合適的根語言本身也有很大關(guān)系。
.cl01 {hyphens: auto;}
.cl02 {hyphens: manual;}
.cl03 {hyphens: none;}
<p class="cl01">Supercalifragilisticexpialidocious antidisestablishmentarian ism.</p>
<p class="cl02">Supercalifragilisticexpialidocious antidisestablishmentarian ism.</p>
<p class="cl02">Super­cali­fragi­listic­expi­ali­ docious anti­dis­establish­ment­arian­ism.</p>
<p class="cl03">Super­cali­fragi­listic­expi­ali­ docious anti­dis­establish­ment­arian­ism.</p>
在設(shè)置hyphen的時候要格外小心，因?yàn)樗抢^承的，可以通過下面這種方式阻斷hyphens的傳遞：
body {hyphens: auto;}
code, var, kbd, samp, tt, dir, listing, plaintext, xmp, abbr, acronym, blockquote, q, textarea, input, option {hyphens: manual;}
另外可能影響hyphen的另一個屬性為word-break:
如果一行文本太長的話，一般就會自動換行，而word-break就可以人為控制這種換行方式。
默認(rèn)值為normal，瀏覽器針對不同語言進(jìn)行換行操作，例如對于拉丁語系來說（比如英語），就以單詞為單位進(jìn)行分隔。但如果是break-all的話，那么哪怕結(jié)尾的一個單詞中間，也會進(jìn)行分隔，而且沒有分隔符。注意line-break屬性也會影響break-all屬性。最后看下keep-all，如果沒有碰到空格那么就是一個語塊，不會換行。
剛說到word-break，而跟其緊密相關(guān)的就是line-break：
下面來看看幾個不同的選項(xiàng)吧
- loose：在文本換行中應(yīng)用最寬松的規(guī)則，適合在短的文章中，例如報紙排版
- normal：應(yīng)用普通規(guī)則，覆蓋大部分情況
- strict：應(yīng)用最嚴(yán)格規(guī)則，但沒有準(zhǔn)確的定義。
文本換行
在上面介紹完各種換行后，那如果文本還是超出了邊框范圍怎么辦？那就可以使用overflow-wrap屬性
這兩個選項(xiàng)的功能也很簡單，normal允許單詞完整輸出后換行，而break-work就是把不等單詞結(jié)束直接換行，而且沒有短橫杠連接，就像下面這樣：
由于歷史原因，overflow-wrap和word-wrap有很多功能是重疊的，而瀏覽器對word-wrap的支持更好點(diǎn)，所以overflow-wrap更多是用于老的兼容：
pre {word-wrap: break-word; overflow-wrap: break-word;}
書寫方式
不同的語言其常用的書寫方式可能是不同的，比如英語和漢字都是從左到右，從上到下，而像阿拉伯語或是希伯來語則是從右向左，從上到下。
在CSS中可以通過writing-mode來設(shè)置：
來看看三種不同的方向：
默認(rèn)是不支持從下到上的順序的，但如果一定要實(shí)現(xiàn)其實(shí)也是可以的：
.flip {transform: rotate(180deg);}
#one {writing-mode: vertical-rl;}
#two {writing-mode: vertical-lr;}
先將元素翻轉(zhuǎn)180度，然后設(shè)置從左往右的垂直屬性就可以。
改變文本朝向
.verts {writing-mode: vertical-lr;}
#one {text-orientation: mixed;}
#two {text-orientation: upright;}
#thr {text-orientation: sideways;}
聲明文本方向
回到CSS2.0的時代，其中有兩個屬性是可以來改變行內(nèi)基線的方向的：direction和unicode-bidi
對于需要從右向左的語言可以提前設(shè)置：
*:lang(ar), *:lang(he) {direction: rtl;}
Unicode相比CSS提供更強(qiáng)的方向操作
小結(jié)
除了font-face可以設(shè)置文本的樣式外，css本身也提供了非常多的輔助屬性，包括添加下劃線，改變文本間距，縮進(jìn)，對齊，換行等等，甚至可以改變行間距。又由于web中大量出現(xiàn)的文本，所以這些屬性提供的功能還是非常強(qiáng)大的，讓我們期待文本中更加有趣的屬性在未來被引入把。
