文本常規設置

文本常規設置

縮進設置

text-indent

全部瀏覽器都支持 text-indent 屬性。IE不支持屬性值"inherit"

text-indent 屬性規定文本塊中首行文本的縮進。

註釋：容許使用負值。若是使用負值，那麼首行會被縮進到左邊。

注意：在 CSS 2.1 以前，text-indent 老是繼承計算值，而不是聲明值。

取值	描述
length	定義固定的縮進。默認值：0。
%	定義基於父元素寬度的百分比的縮進。
inherit	規定應該從父元素繼承 text-indent 屬性的值。

文本對齊方式

text-align

全部瀏覽器都支持 text-align 屬性。IE不支持屬性值"inherit"

text-align 屬性規定元素中文本的水平對齊方式。

該屬性經過指定行框與哪一個點對齊，從而設置塊級元素內文本的水平對齊方式。經過容許用戶代理調整行內容中字母和字之間的間隔，能夠支持值 justify；不一樣用戶代理可能會獲得不一樣的結果。

取值	描述
left	把文本排列到左邊。默認值：由瀏覽器決定。
right	把文本排列到右邊。
center	把文本排列到中間。
justify	實現兩端對齊文本效果。
inherit	規定應該從父元素繼承 text-align 屬性的值。

值 justify

最後一個水平對齊屬性是 justify，它會帶來本身的一些問題。

值 justify 可使文本的兩端都對齊。在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上。而後，調整單詞和字母間的間隔，使各行的長度剛好相等。您也許已經注意到了，兩端對齊文本在打印領域很常見。不過在 CSS 中，還須要多作些考慮。

要由用戶代理（而不是 CSS）來肯定兩端對齊文本如何拉伸，以填滿父元素左右邊界之間的空間。例如，有些瀏覽器可能只在單詞之間增長額外的空間，而另一些瀏覽器可能會平均分佈字母間的額外空間（不過 CSS 規範特別指出，若是 letter-spacing 屬性指定爲一個長度值，「用戶代理不能進一步增長或減小字符間的空間」）。還有一些用戶代理可能會減小某些行的空間，使文本擠得更緊密。全部這些作法都會影響元素的外觀，甚至改變其高度，這取決於用戶代理的對齊選擇影響了多少文本行。

CSS 也沒有指定應當如何處理連字符（注1）。大多數兩端對齊文本都使用連字符將長單詞分開放在兩行上，從而縮小單詞之間的間隔，改善文本行的外觀。不過，因爲 CSS 沒有定義連字符行爲，用戶代理不太可能自動加連字符。所以，在 CSS 中，兩端對齊文本看上去沒有打印出來好看，特別是元素可能太窄，以致於每行只能放下幾個單詞。固然，使用窄設計元素是能夠的，不過要小心相應的缺點。

注1：CSS 中沒有說明如何處理連字符，由於不一樣的語言有不一樣的連字符規則。規範沒有嘗試去調和這樣一些極可能不完備的規則，而是乾脆不提這個問題。

文本換行

white-space、word-break、word-wrap

全部瀏覽器都支持 white-space、word-break、word-wrap 屬性。IE不支持 white-space 屬性值"inherit"

white-space

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

取值	描述
normal	默認。空白會被瀏覽器忽略。
pre	空白會被瀏覽器保留。其行爲方式相似 HTML 中的 標籤。
nowrap	文本不會換行，文本會在在同一行上繼續，直到遇到 標籤爲止。
pre-wrap	保留空白符序列，可是正常地進行換行。
pre-line	合併空白符序列，可是保留換行符。
inherit	規定應該從父元素繼承 white-space 屬性的值。

word-break

word-break 屬性規定自動換行的處理方法。

取值	描述
normal	使用瀏覽器默認的換行規則。
break-all	容許在單詞內換行。
keep-all	只能在半角空格或連字符處換行。

word-wrap

word-wrap 屬性容許長單詞或 URL 地址換行到下一行。

取值	描述
normal	只在容許的斷字點換行（瀏覽器保持默認處理）。
break-word	在長單詞或 URL 地址內部進行換行。

word-wrap是用來標明是否容許瀏覽器在單詞內進行斷句，爲了防止當一個字符串太長而找不到它的天然斷句點時產生溢出現象。word-break用來標明怎樣進行單詞內的斷句。

總結

/* 經常使用文本換行格式設置 */
.text{
  white-space: normal;
  word-break: keep-all;
  word-wrap: break-word;
}
/* 經常使用文本禁止換行 */
.text{
  white-space: nowrap;
}
複製代碼

字間距

letter-spacing 屬性規定字間距

取值	描述
normal	默認。規定字符間沒有額外的空間。
length	定義字符間的固定空間（容許使用負值）。
inherit	規定應該從父元素繼承 letter-spacing 屬性的值。

文本溢出處理

text-overflow 規定當文本溢出包含元素時發生的事情

取值	描述
clip	隱藏超出文本
ellipsis	顯示省略符號來表明超出文本。
string	使用指定字符串代替超出文本