從零基礎到輕鬆就業 | CSS——CSS 給文本加樣式：② 文本屬性（ Ⅱ ）

原創：itsOli  @前端一萬小時

本文首發於公衆號「前端一萬小時」

本文版權歸做者全部，未經受權，請勿轉載！
複製代碼

---

🔗緊接上篇文章

2 大整形：把文本放在最和諧、最養眼的位置——文本佈局

2.1 首行縮進

text-indent 屬性用於指定文本內容的第一行前面應該留出多少的水平空間。

2.2 文本水平對齊（左對齊、右對齊、居中等）

text-align 屬性用於控制文本如何和它所在的內容盒子水平對齊。

p {
  text-align: 值;
}

left       左對齊文本；
right      右對齊文本；
center     居中文字；

justify    使文本展開，改變單詞之間的距離，使全部文本行的寬度相同。
實際工做中使用時須要注意，特別是當應用於其中有不少長單詞的段落時。
若是咱們要使用這個，咱們應該考慮一塊兒使用別的東西，好比 hyphens 來打破一些更長的詞語。
複製代碼

💡 text-align-last 屬性用於定義一段文本內容的最後一行在被強制換行以前的對齊規則。

2.3 行高

line-height 屬性用於設置文本每行之間的高。

當行與行之間拉開空間，正文文本的閱讀體驗會更好。

「高」能夠接受大多數單位，但實際工做中咱們經常設置一個無單位的值做爲乘數。用無單位的值乘以 font-size 來得到 line-height 。推薦的行高大約是 1.5–2，即字體高度的 1.5-2 倍。

p {
  line-height: 1.5;
}
複製代碼

下兩篇文章咱們還會着重介紹屬性 line-height 和 vertical-align 之於「‘行內盒子’格式化」的重點、難點問題。

2.4 字母和字間距

word-spacing 屬性用於修改「字」與「字」之間的間隔長度；

letter-spacing 屬性用於修改「字母、字符」與「字母、字符」之間間隔的長度。

「字」是指：任何非空白符字符組成的串，並由某種空白符包圍。例如：How are you 是 3 個字，9 個字母。

p {
  word-spacing: 2em;
}

p {
  letter-spacing: 2em;
}
複製代碼

2.5 處理空白符

white-space 屬性用於處理「字之間」和「文本之間」的空白符顯示方式。

在以前的關於 HTML 的文章中咱們瞭解到，因爲 HTML 對空白符有默認的處理方式——它會把全部空白符合併爲一個空格，而且忽略元素中的換行。因此當時若是想對文本換行，咱們須要用到標籤 <br> 。而在 CSS 中咱們有如下方法：

p {
  white-space: 值;
}

normal     和默認的同樣，合併全部的空白符，並忽略換行符；
pre        瀏覽器不會合並空白符，也不會忽略換行符；
nowrap     不換行；
pre-wrap   瀏覽器不只會保留空白符並保留換行符，還容許自動換行；
pre-line   瀏覽器會保留換行符，並容許自動換行，可是會合並空白符，這是與 pre-wrap 值的不一樣之處。
複製代碼

2.6 其餘

💡對於文本屬性，咱們能夠學習、探索的還有不少。例如接下來的文章，咱們在介紹「盒模型」時，還會接觸到 text-overflow 、 white-space 與 overflow 的綜合運用（爲了使文本在有限的盒子裏更優雅的展示——好比當文本過長時，咱們可使其顯示爲 … ）。

3 上一篇的遺留問題—— font

複習上一篇：《從零基礎到輕鬆就業 | CSS——CSS 給文本加樣式：① 字體屬性》

上一篇不少的「字體屬性」和這一篇學習的 line-height ，均可以經過 font 把它們設置在一個聲明裏。
順序爲：

font-style → font-variant → font-weight → font-stretch → font-size → line-height → font-family

❗️若是咱們想用 font 來簡寫，那麼 font-size 和 font-family 是必定要指定的，其餘的可有可沒有。
❗️font-size 和 line-height 屬性之間必須放一個正斜槓。

p {
  font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
}
複製代碼

---

後記： 經過兩篇兄弟文章，咱們大體掌握了 CSS 怎樣給文本加樣式。但須要注意的是，與文本相關的屬性還有不少不少，實際工做中要實現一個效果，也能夠有不少不一樣的方法。

那怎樣以不變應萬變呢？咱們在接下來的兩篇文章中將獲得一些靈感。

祝好，qdywxs ♥ you！