CSS進階（19）—— CSS中的文本處理（下）

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>
複製代碼

因爲markdown編輯器支持標籤語言，所以咱們能夠直接預覽最終效果以下（小提示：你能夠經過瀏覽器直接檢查下面的元素看到CSS樣式）

趙本山：人是衣，馬是鞍，一看長相二看穿.白天想，夜裏哭，作夢都想去首都.倆腳離地了，病毒就關閉了，啥都上不去了，嚎.

宋丹丹：改革春風吹滿地，吹滿地，春風吹滿地.中國人民真爭氣，真爭氣，人民真爭氣.這個世界太瘋狂，耗子都給貓當伴娘.齊德隆，齊東強，齊德隆的咚得隆咚鏘

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

letter-spacing能夠用來控制字符之間的間距，例如

<p>letter spacing</p>
<style> p{ letter-spacing: 0.5em } </style>
複製代碼

letter spacing

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>
複製代碼

letter spacing負值

能夠看到，文字已經有部分重疊了，當咱們繼續增長負值的時候，當負值足夠大的時候，文字直接反過來寫了，同時能夠發現另一個現象，就是首字母l的位置始終保持在近似居中的位置，從理論上講，首字母的位置徹底沒有發生改變，這個能夠本身測試下看看。

letter spacing反過來

利用這個反向排列的特色，咱們能夠實現一個文字依次飛入的效果，連接在下方。

文字飛入效果

講完了letter-spacing字符間隔，咱們再來聊聊word-spacing單詞間距，眼尖的小夥伴可能一經發現，我給word-spacing的"單詞間距"打了引號，爲何要打引號呢？由於word-spacing並非真正做用於每一個單詞，如今尚未哪一個算法徹底支持識別單詞的，所以word-spacing乾脆偷個懶，直接做用於空格不就完事兒了嘛，換句話說，word-spacing的做用就是增長空格的間隙，有空格就有效，鑑於英文單詞之間的空格較多，這個屬性不太符合我國國情，這裏就不詳細介紹了。

下面咱們來聊聊letter-spacing和word-spacing還具備哪些特性：

• 都具備繼承性，所以你能夠經過letter-spacing:normal重置樣式
• 默認值都是normal而不是0
• 都支持負值，均可以讓字符重疊和反向顯示
• 都不支持百分比值。
• 都會受到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包含如下五種屬性，建議收藏到本身的備忘錄裏以便查閱。

• normal：默認屬性，合併空白字符和換行符。意思就是看見連續的空格或回車，一概處理成單個空格。
• pre：空格字符不合並，而且內容只有在有換行符的地方換行，也就是自動換行的能力消失。
• nowrap：書上說，該值和normal同樣會合併空白字符，但不容許文本環繞，我的對不容許文本環繞的理解就是，內容不會在任何狀況下換行，後面有關文本環繞的部分所有用手動換行和自動換行是否有效來講明。
• pre-wrap：空白字符不合並，而且內容會在有換行符的地方換行，也支持自動換行。
• 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>
複製代碼

因爲markdown編輯器支持標籤語言，所以咱們能夠直接預覽最終效果以下（小提示：你能夠經過瀏覽器直接檢查下面的元素看到CSS樣式）

單行文字超出部分用省略號顯示

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

5.神奇的text-align:justify

text-align支持文字左中右對齊，默認爲text-align:left，左對齊。這裏咱們來聊一聊text-align:justify兩端對齊屬性。在講word-break的時候，我提到了瀏覽器遇到連續的長單詞後，不能很好的進行換行，所以就會致使英文的顯示出現一種層次不齊的效果，以下例：

<p>There's a long line of English here. I'm going to write it as an article.</p>
<style> p{ width: 200px; } </style>
複製代碼

因爲markdown編輯器支持標籤語言，所以咱們能夠直接預覽最終效果以下（小提示：你能夠經過瀏覽器直接檢查下面的元素看到CSS樣式）

There's a long line of English here. I'm going to write it as an article.

爲了解決這個問題，便有了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>
複製代碼

因爲markdown編輯器支持標籤語言，所以咱們能夠直接預覽最終效果以下（小提示：你能夠經過瀏覽器直接檢查下面的元素看到CSS樣式）

There's a long line of English here. I'm going to write it as an article.

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等等，以爲本文有用的點個贊吧。

不忘初心，方得始終

喜歡博主的童鞋能夠掃描二維碼加博主好友~ 也能夠掃中間二維碼入駐博主的粉絲羣（708637831）~固然你也能夠掃描二維碼打賞並直接包養帥氣的博主一枚。