從零學CSS系列之文字屬性_基礎教程

1.line-height

可以給某個元素指定一個不帶單位的縮放因子，這樣它的後代元素就會繼承這個縮放因子，再根據自身的字型大小大小來計算自己的行高(line-height)值，

複製代碼 代碼如下:

body {
  font-size: 12px;
  line-height: 1.5;
}

h1 {
  font-size: 36px;
}

這裡，body 的 line-height 是 18px（12 * 1.5），而 h1 的 line-height 則是 54px（36 * 1.5）。

就算使用 em，百分比等相對單位，後代元素繼承的仍然是計算後的行高(line-height)值，比如把上面的 body 行高改成 1.5em，那麼 h1 的行高就會繼承這個值 18px。

2.text-decoration

文本修飾是非繼承類屬性，給 body 元素設定為 none，並不會影響到後代中預設有文本修飾的元素，例如超連結，所以如果要去掉超連結的預設底線還是需要單獨進行設定，

複製代碼 代碼如下:

a {
  text-decoration: none;
}

雖然該屬性預設不繼承，但是祖先元素上設定的修飾會“延伸”到後代元素中，

複製代碼 代碼如下:

<p>我有底線 <span>我咋會有底線呢?</span></p>

複製代碼 代碼如下:

p {
  color: red;
  text-decoration: underline;
}

p span {
  color: green;
  text-decoration: none;
}

這裡的底線是 p 元素的。

複製代碼 代碼如下:

p {
  color: red;
  text-decoration: underline;
}

p span {
  color: green;
  text-decoration: underline;
}

由於文本修飾屬性的延伸會造成一些相容性的問題，所以

最好的做法就是給需要修飾的文本單獨設定 text-decoration 屬性。

3.text-indent

可以使用該屬性給每個段落首行縮排2個字元，而不是使用空格，

複製代碼 代碼如下:

p {
  text-indent: 2em;
}

也可以指定一個負數的值，產生首行懸掛的效果，

讓引號懸掛也是一種常用做法，

讓文本縮排到一個足夠遠的地方，可以讓文字消失，

複製代碼 代碼如下:

text-indent: -9999px;

 因此，通常的映像替換文字常用方法，

複製代碼 代碼如下:

.logo {
  background: url(logo.png) no-repeat;
  display: inline-block;
  height: 36px;
  text-indent: -9999px;
  width: 72px;
}

IE6/7 並不真正支援 inline-block，某些情況下可能會導致 .logo 消失不見，可以使用浮動或者 block 替代 inline-block，不過兩者都會改變布局方式，也可以使用其它方法。

4.text-overflow

通常情況下，長串的URL地址，在超出容器時會溢出，我們可以設定當文本溢出包含容器時顯示省略符號，

複製代碼 代碼如下:

li {
  overflow: hidden;
  text-overflow: ellipsis;
}

必須配合 overflow: hidden; 一起使用；有時候可能還得加上一個寬度，比如IE 6，

對於那些預設情況下並不會溢出的文本，需要強制其在一行內顯示，這樣才能產生效果，

複製代碼 代碼如下:

li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%; /* for IE 6 */
}

使用 white-space: pre; 或者 word-break: keep-all; 也能強制文本在一行顯示，不過各有各的問題。

在 IE 8/9 中，有時候會發現沒有效果，那有可能是祖先元素中某個元素設定了word-wrap: break-word; 而該屬性會表現得比 white-space: nowrap; 更強勢，所以，有時候還得加上下面代碼，

複製代碼 代碼如下:

word-wrap: normal;

5.text-shadow

在非白色背景的深色文字上，可以實現漂亮的內嵌效果，

複製代碼 代碼如下:

text-shadow: 0 1px 0 rgba(255,255,255,.75);

可以給文本添加多個陰影，用逗號分隔，

複製代碼 代碼如下:

text-shadow: 0 1px 0 #fff, 0 2px 0 #ddd, 0 3px 0 #ddd, 0 4px 0 #ddd;

6.white-space

white-space 屬性設定如何處理元素內的空白。

設定值為 nowrap 讓文本可以在同一行上繼續，遇到邊界也不會換行，直到遇到 <br> 標籤，

複製代碼 代碼如下:

white-space: nowrap;

有時我們希望保留文本中的空格和分行符號之類的，比如展示電腦的原始碼的時候，就會用到 <pre>，而 <pre> 的 white-space 屬性的值就是 pre，

複製代碼 代碼如下:

pre {
  white-space: pre;
}

pre 也不那麼盡如人意，遇到邊界的時候不會自動換行，所以 CSS 2.1 新增了 pre-wrap，

複製代碼 代碼如下:

pre {
  white-space: pre;
  white-space: pre-wrap;
}

這樣 pre 元素裡的內容既能保持原有的格式，又能在內容超出邊界的時候自動換行。

由於不是所有瀏覽器都支援 pre-wrap，所以還需要讓那些不支援瀏覽器強制換行，

複製代碼 代碼如下:

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

當然，也許你並不希望換行，也不介意水平捲軸，那可以用水平捲軸來代替換行，

複製代碼 代碼如下:

pre {
  overflow: auto;
}

7.word-break

目前 webkit 大家族（包括 Google Chrome，Safari，Android Browser 等等）均不支援 keep-all 值，所以能用的也就 break-all 了，

複製代碼 代碼如下:

word-break: break-all;

不過會造成英文文本閱讀障礙，應該慎用，

8.word-wrap

這是比 word-break 更好的實現文本換行的方式，

複製代碼 代碼如下:

word-wrap: break-word;

再添加一個溢出隱藏，避免一些惡意的連續字元，

複製代碼 代碼如下:

overflow: hidden;