CSS有很多屬性專門用來對文字進行控制，由於這些屬性的作用機制往往是基於內聯盒模型的，因此對於內聯塊狀元素也是有效果的，如我們最常用的text-align:center可以讓內聯元素水平居中。本章我們就來深入探索一下CSS中的文字控制屬性。

1.text-indent負值的妙用

  text-indent指對文字首行的縮排控制，設計初衷就是為了實現段落文字的首行縮排2em的效果。但是這種縮排對內容的要求比較高，如果段落摻雜英文單詞，長數字或圖片等內容，就會導致段落層次不齊的感覺，因此text-index的首行縮排已經逐漸坐實冷板凳了。雖然text-indent沒能在首行縮排上做出貢獻，但text-indent的負值卻一不小心有了作用。

  首先用的比較多的是text-indent負值隱藏內容，如網站的logo，從SEO的角度講，我們可以用<h1>標籤來放置我們的標識，同時寫上對應的文字內容，例如

<h1 class="logo">CSS世界</h1>
<style>
.logo{
    width:120px;
    background:url('logo.png');
    text-indent:-120px;
}
</style>

  當然如果你為了保持通用性，你可以設定.hide{text-indent:-9999px}，但根據作者的提示，這麼做會存在一些潛在的風險，具體可問下度孃的建議。

 text-indent在使用的時候需要注意，text-indent的百分比值是相對於當前元素的“包含塊”計算的（包含塊的科普在絕對定位那章已經講過了，這裡有傳送門），因此text-indent：100%有些情況下會出問題，什麼情況下呢？當包含塊的寬度小於內聯元素的寬度就會出問題了，什麼情況下包含塊的寬度會小於內聯元素的寬度呢？你自己想，我就給您提個醒，元素的隱藏也不建議使用這種做法。因此就不多聊了。

  text-indent僅對第一行內聯盒子內容有效，因此我們可以藉助這個特性，來實現一些僅對第一行有特殊要求的佈局，如下所示

  程式碼如下

<style>
	p{
		padding-left: 3em;
		text-indent: -3em;
		width: 300px;
	}
</style>
 

2.letter-spacing字元間距與word-spacing"單詞間距"

  letter-spacing可以用來控制字元之間的間距，例如

<p>letter spacing</p>
<style>
	p{
		letter-spacing: 0.5em
	}
</style>

  letter-spacing除了可以用了控制字元之間的間距之外，還支援負值，在瞭解負值之前，需要注意一個點，letter-spacing的預設值是normal，而不是0，雖然在大部分情況下這兩個值是近似相同的，但在某些場景下letter-spacing會調整normal的計算值來實現更好的文字排版。

  letter-spacing在>=0的時候，能使字元的間隔增大，那麼當letter-spacing<0的時候，會怎麼樣呢？眼見為實

<p>letter spacing負值</p>
<style>
	p{
		letter-spacing: -0.2em
	}
</style>

  可以看到，文字已經有部分重疊了，當我們繼續增加負值的時候，當負值足夠大的時候，文字直接反過來寫了，這裡我還藉助了text-align:center來使得文字居中，可以發現另外一個現象，就是首字母l的位置始終保持在近似居中的位置，從理論上講，首字母的位置完全沒有發生改變，這個可以自己測試下看看。

  利用這個反向排列的特點，我們可以實現一個文字依次飛入的效果，想看效果的點選這個連結。

  講完了letter-spacing字元間隔，我們再來聊聊word-spacing單詞間距，眼尖的小夥伴可能一經發現，我給word-spacing的"單詞間距"打了引號，為什麼要打引號呢？因為word-spacing並不是真正作用於每個單詞，現在還沒有哪個演算法完全支援識別單詞的，因此word-spacing乾脆偷個懶，直接作用於空格不就完事兒了嘛，換句話說，word-spacing的作用就是增加空格的間隙，有空格就有效，鑑於英文單詞之間的空格較多，這個屬性不太符合我國國情，這裡就不詳細介紹了。

  下面我們來聊聊letter-spacing和word-spacing還具有哪些特性。

（1）都具有繼承性，因此你可以通過letter-spacing:normal重置樣式

（2）預設值都是normal而不是0

（3）都支援負值，都可以讓字元重疊和反向顯示

（4）都不支援百分比值。

（5）都會受到text-align:justify兩端對齊的影響

3.支援“人性化”的word-break

  本節原文的內容是瞭解word-break和word-wrap的區別，經過本人測試，word-wrap:normal/break-word；兩個屬性值好像沒什麼區別，因此，我們還是聊聊word-break屬性吧。

  在上文中我們講到了眾所周知的“文字換行”在SVG需要手動才能實現，在CSS中，就是由word-break來掌管文字的換行的，一般情況下，我們很少去用word-break屬性，這是我們國家的國情導致的，對於中/日/韓文來說，任何一個文字都可以作為一個單詞被換行，因此當中文在一行放不下的時候就會自動換行，但是英文卻有所不同，我們知道英文的每個單詞的長度會有所不同，有的單詞長，有的單詞短，遇到需要換行的時候，就會有兩種方案。

  第一種是word-break:normal。單詞放不下的時候直接換行，不管上一行留了多少空白，這會導致一個什麼問題呢？就是我們在放網址的時候，由於域名是連續的“長單詞”，因此會出現一大段很長的空白，很不好看。

  為了解決上面的問題，就出現了第二種方案，word-break:break-all，不管是什麼字元，遇到本行放不下就直接換行，且保證當前行已經被放滿。來看看兩者有什麼不同吧。

  因此這兩種方案在選擇的時候需要結合實際場景，這裡不過多演示。

4.空格符與換行符的管理員white-space

  white-space屬性聲明瞭如何處理標籤內部的空格和回車，這裡的回車指的是鍵盤上的回車鍵，跟自動換行沒有關係，你可以理解為手動換行符。我們需要注意的是，除了space鍵可以生成空格，tab鍵也可以生成空格。

  white-space包含以下五種屬性，建議收藏到自己的備忘錄裡以便查閱。

（1）normal：預設屬性，合併空白字元和換行符。意思就是看見連續的空格或回車，一律處理成單個空格。

（2）pre：空格字元不合並，並且內容只有在有換行符的地方換行，也就是自動換行的能力消失。

（3）nowrap：書上說，該值和normal一樣會合並空白字元，但不允許文字環繞，個人對不允許文字環繞的理解就是，內容不會在任何情況下換行，後面有關文字環繞的部分全部用手動換行和自動換行是否有效來說明。

（4）pre-wrap：空白字元不合並，並且內容會在有換行符的地方換行，也支援自動換行。

（5）pre-line：空白字符合並，內容支援自動換行和手動換行。

  上面只是概念性的東西，作者將上面這些屬性整理成了表格，這裡我就借花獻佛，所謂文字環繞，你只要理解成是否支援自動換行即可。

  除了概念之外，我還對這些屬性做了測試，來看一下下面這個例子，不理解的童鞋可以對照著表格和下面的例子來記憶這些屬性。

<div class="normal">合併空白字元和換行符</div>
<div class="pre">空白    字元不合 並，並且只有在有換行符的地方
換行
</div>
<div class="nowrap">合併空     白字元，但是不能
換行,換行符用空格
代替
</div>
<div class="pre-wrap">空白字元  不    合併，允許自動換行和
手動
換行
</div>
<div class="pre-line">空白字元     合併，允許自動換行和
手動
換行
</div>

<style>
	div{
		width: 8em;
		margin: 40px 0;
	}
	.normal{
		white-space: normal;
	}
	.pre{
		white-space: pre;
	}
	.nowrap{
		white-space: nowrap;
	}
	.pre-wrap{
		white-space: pre-wrap;
	}
	.pre-line{
		white-space: pre-line;
	}
</style>

  上面我們已經瞭解了white-space的概念，下面我們來講講white-space的一些實際應用。

  首先white-space最廣泛的應用應該是配合overflow:hidden以及text-overflow:ellipsis來實現單行文字超出部分省略號的效果，這裡利用的norwap屬性文字不換行的特性。

<div class="hideText">單行文字超出部分用省略號顯示</div>
<style>
	.hideText{
		width: 200px;
		font-size: 20px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>

  還記得我們在absolute章節講過的包含塊過小導致的文字一柱擎天的解決方案嗎？就是利用norwap的不換行屬性解決的，除了以上兩個應用，white-space還在很多地方非常有效，這裡就不過多介紹了。

 5.神奇的text-align:justify

  text-align支援文字左中右對齊，預設為text-align:left，左對齊。這裡我們來聊一聊text-align:justify兩端對齊屬性。在講word-break的時候，我提到了瀏覽器遇到連續的長單詞後，不能很好的進行換行，因此就會導致英文的顯示出現一種層次不齊的效果，如下例：

<!-- text-align:justify在英文中的表現 -->
<p>There's a long line of English here. I'm going to write it as an article.</p>
<style>
	p{
		width: 200px;
	}
</style>

  為了解決這個問題，便有了text-align:justify屬性來支援兩端對齊。就最終的渲染表現來看，chrome瀏覽器對類中文文字使用了letter-spacing間隔演算法，對類英文使用了word-spacing間隔演算法，而IE瀏覽器只有word-spacing間隔演算法，因此如果需要做向下相容，我們需要完整的寫上如下程式碼。

<!-- text-align:justify在英文中的表現 -->
<p>There's a long line of English here. I'm going to write it as an article.</p>
<style>
	p{
		width: 200px;
		text-align: justify;
		text-justify:inter-ideograph;
	}
</style>

 text-align:justify實現的是內聯元素的兩端對齊效果，因此不僅僅是純粹的文字，對於inline-block元素，text-align:justify也能實現較好的自適應兩端對齊的效果，事實上flex佈局中提供了這個對齊方式的簡易版，由於text-align:justify要實現元素的兩端對齊有一個非常蛋疼的限制條件以及最後一行需要特殊處理，因此建議直接使用flex佈局中的內容。如果對justify實現兩端對齊感興趣的童鞋可以訪問張鑫旭的官方連結，我這裡就給個傳送門吧~

6.雜七雜八瞭解一下就好的屬性

  關於CSS的文字處理能力，沒有詳細寫的還有如下幾個屬性，個人認為不怎麼重要，瞭解一下就好

  text-decoration:underline。給文字新增下劃線，可以用border-bottom代替，而且border-bottom好控制一些，還能用虛線和虛點，因此這個下劃線屬性基本沒什麼軟用。除了下劃線外，text-decoration還支援上劃線，那就更沒有什麼軟用了，好在他還支援中劃線，如下圖所示，由於下圖的樣式模擬起來可能有一定困難，因此可以瞭解一下text-decoration：line-through中劃線屬性。

  text-transform:uppercase/lowercase。這個屬性主要用於控制字元大小寫，在某些場景可能比較有用，比如身份證最後一位如果是x的話，此時你輸入小寫的x，可以通過text-transform:uppercase自動轉成大寫，這樣不管輸入小寫的x還是大寫的，最終的結果都是正確的。

  其他諸如:first-letter和:first-line的偽元素，在實際場景中基本用不到，如果我們需要操作某一句話的某些字元的話，用正則匹配即可，如匹配關鍵字，用標籤替換文字，因此這兩個偽元素就不過多介紹了。

  CSS中的文字操作就講到這兒，有什麼問題歡迎指出，指出我也不會聽你的，下一章是關於元素的裝飾和美化的，如color,background-color等等，感興趣的點個關注吧。