圖解 CSS (6): text – 文字格式設定

line-heightword-spacingletter-spacingtext-alignvertical-aligntext-indentwhite-spaceword-wrapword-breaktext-transformdirectionunicode-bidiwriting-modetext-decorationtext-underline-positiontext-justifylayout-flowlayout-gridlayout-grid-modelayout-grid-typelayout-grid-linelayout-grid-charlayout-grid-char-spacing 已廢棄的或測試失敗的:text-shadowtext-autospacetext-kashida-space

line-height(行高): normal(預設)、數值或百分比.

word-spacing(字間距): normal(預設)、數值或百分比.

letter-spacing(字元間距): normal(預設)、數值.

text-align(橫向對齊): left(預設)、right、center、justify(左右對齊).

vertical-align(縱向對齊):
baseline(基準)、top、text-top、bottom、text-bottom、middle、sub(下標)、super(上標)、數值或百分比.

baseline 對齊是預設:

沒看出 top 和 text-top 的區別:

bottom 和 text-bottom 應該差不多, 但 bottom 好像不對勁:

middle、sub、super:

還可以使用數值或百分比:

text-indent(段首縮排):

white-space: normal(預設)、pre(IE下無效)、nowrap(禁止自然換行).

word-wrap: normal(預設)、break-word(根據邊界換行).

word-break(控制單詞換行):
normal(預設, 換行是考慮英文單詞邊界)、
break-all(不管單詞邊界根據容器大小換行)、
keep-all(這個厲害, 容不下中文的一句話就換行; 句子是用空白和標點區分的).

text-transform(大小寫控制): none(預設)、capitalize(首字母大寫)、uppercase(全大寫)、lowercase(全小寫).

direction(ltr、rtl) 與 unicode-bidi(normal、bidi-override、embed)

writing-mode: lr-tb(預設)、tb-rl.

text-decoration: none、underline(下畫線)、overline(上畫線)、line-through(中畫線)、blink(閃爍, IE 不支援).

text-underline-position: above、auto、auto-pos、below.
text-underline-position 存在的理由應該是讓 text-decoration 畫的線可以自訂位置, 但現在基本不可用.
只可以把 text-decoration: underline; 指定的底線弄到上面去, 暫時有點多餘.

text-justify: auto、inter-word、inter-ideograph、newspaper、distribute、distribute-all-lines.

這是關於文本左右對齊的更多控制, 需要先: text-align: justify;

沒看出 auto、inter-word、inter-ideograph 有區別, 都似預設效果:

newspaper:

distribute:

distribute-all-lines:

:first-letter(單獨給首字母定義樣式)

:first-line(單獨給首行定義樣式)

layout-flow: horizontal、vertical-ideographic;

layout-grid-mode: both、line、char、none;
layout-grid-type: loose、strict、fixed;
layout-grid-line: none、auto、length;
layout-grid-char: none、auto、length;
layout-grid-char-spacing : auto、length;

使用 layout-grid 綜合設定的順序是:
layout-grid-mode、layout-grid-type、layout-grid-line、layout-grid-char、layout-grid-char-spacing.