CSS魔法堂：你真的懂text-align嗎？

tinylcy 發(fā)布于2019-08-30 12:54 / 3195人閱讀

摘要：深入本屆集團(tuán)公司黨委由公司黨委由本屆集團(tuán)公司黨委由公司黨委由組均是，而組則是。下英文泰文等的默認(rèn)對齊方式，下的默認(rèn)對齊方式等同于，采用增加減少象形文字間的距離。

前言

也許提及text-align你會(huì)想起水平居中，但除了這個(gè)你對它還有多少了解呢？本篇打算和大家一起來跟text-align來一次負(fù)距離的交往，你準(zhǔn)備好了嗎？

text-align屬性詳解

The "text-align" CSS property describes how inline content like text and inline-level element etc. is aligned in its parent block element.Does not control the alignment of block elements, only their inline content.

"text-align"
Value: left | right | center | justify | justify-all | start | end | | match-parent | inherit
Initial: start, or a nameless value that acts as "left" if "direction" >is "ltr", "right" if "direction" is "rtl"
Applies to: block containers
Inherited: yes
Percentages: N/A
Media: visual
Computed value: the initial value or as specified, except for the match-parent value which is calculated against its parent"s direction value and results in a computed value of either left or right

CSS2中的屬性值:
left: Align the text to the left side of the line box.
right: Align the text to the right side of the line box.
center: Align the text to the middle of the line box.
justify: Align the text so that the first and last characters or inline-level element are aligned with the left and right line box edge.
示例：

direction left:As most young candidates for the pains and penalties

direction right:As most young candidates for the pains and penalties

left:As most young candidates for the pains and penalties

right:As most young candidates for the pains and penalties

center:As most young candidates for the pains and penalties

justify:As most young candidates for the pains and penalties

這里我們要注意一下，text-align所設(shè)置的是以inline-level box所在的line box作為參考系來進(jìn)行水平排列對齊，而不是block container所生成的containing block，就更不是以viewport為參考系。CSSRec中寫道

A block of text is a stack of line boxes. In the case of "left", "right" and "center", this property specifies how the inline-level boxes within each line box align with respect to the line box"s left and right sides; alignment is not with respect to the viewport.

另外對于屬性值justify而言，CSS REC中特別說明

In the case of "justify", this property specifies that the inline-level boxes are to be made flush with both sides of the line box if possible, by expanding or contracting the contents of inline boxes, else aligned as for the initial value. (See also "letter-spacing" and "word-spacing".)

If an element has a computed value for "white-space" of "pre" or "pre-wrap", then neither the glyphs of that element"s text content nor its white space may be altered for the purpose of justification.

在此我們先要打個(gè)岔，先理解letter-spacing,word-spacing，不然無法真正理解text-align:justify的原理。

字形、單詞間的水平距離 letter-spacing干嘛了？

letter-spacing就是用于定義兩個(gè)字形間的水平距離。

"letter-spacing"
Value: normal | | inherit
Initial: normal
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: "normal" or absolute length

normal:根據(jù)當(dāng)前字體和字體大小，由UA自定義的水平距離。
:可正可負(fù)，字形間最終的水平距離 = UA自定義的水平距離 + length值

word-spacing干嘛了？

word-spacing就是用于定義兩個(gè)單詞間的水平距離。

"word-spacing"
Value: normal | | inherit
Initial: normal
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: for "normal" the value "0"; otherwise the absolute length

normal:根據(jù)當(dāng)前字體和字體大小，由UA自定義的水平距離。
:可正可負(fù)，單詞間最終的水平距離 = UA自定義的水平距離 + length值
注意：word-spacing作用于word-separator characters。而定義的word-separator characters有(普通空格符，U+0020）和（非斷行空格符，U+00A0）兩種。word-spacing所指定的距離會(huì)緊跟在word-separator characters后面。其他字符均不受word-spacing的影響。——也就是說word-spacing的單詞間距只是我們?nèi)粘．?dāng)中的“單詞間距”的子集而已。

letter-spacing:normal; word-spacing:normal;
letter-spacing:2px; word-spacing:normal;
letter-spacing:-2px; word-spacing:normal;
letter-spacing:2px; word-spacing:10px;
letter-spacing:2px; word-spacing:-10px;
word-spacing(1000px)-doesn"t-affect-other-characters

深入text-align:justify

pure alphanumeric 123 432112 12313123124123

本屆集團(tuán)公司黨委由公司黨委由

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

a組均是text-align:start，而b組則是text-align:justify。可以看到text-align:justify有兩個(gè)特點(diǎn)：

通過調(diào)整字符或單詞間的距離，實(shí)現(xiàn)第一個(gè)/最后一個(gè)inline-level boxes與line box的左右邊框?qū)R；

最后一個(gè)line box內(nèi)的inline-level boxes采用的不是text-align:justify。而是采用text-align:start。

?第1點(diǎn)說到"字符或單詞間的距離",自然會(huì)聯(lián)想到上面所說的letter-spacing和word-spacing屬性，但只要采用text-align:justify，那么上述兩者之一的屬性值將失效。若調(diào)整的是"字符間的距離"則letter-spacing失效，若調(diào)整的是"單詞間的距離"則是word-spacing失效。
?那問題來了，到底什么時(shí)候是"字符間的距離"什么時(shí)候是"單詞間的距離"呢？
?CSS3中引入了新屬性text-justify:auto|none|inter-word|inter-ideograph|inter-cluster|distribute|kashida用于對text-align:justify具體的對齊算法作調(diào)整，雖然現(xiàn)在僅僅IE支持該屬性，但不妨外我們通過它來了解具體的對齊算法規(guī)則。
inter-word: 采用增加/減少單詞間的距離。chrome下英文、泰文等的默認(rèn)對齊方式，IE5.5~9下CJK的默認(rèn)對齊方式；
inter-ideograph: 等同于inter-letter，采用增加/減少象形文字間的距離。chrome下CJK(中日韓文)等的默認(rèn)對齊方式;
而text-align:justify的默認(rèn)方式text-justify:auto: 則是對英文、泰文采用inter-word方式，對CJK采用inter-ideograph方式。
注意：具體對哪類語言采用哪種方式是由瀏覽器決定！
?而第2點(diǎn)說到"最后一個(gè)line box內(nèi)的inline-level box采用的是text-align:start"，這個(gè)我們也可以參考CSS3的新屬性text-align-last。當(dāng)text-align:justify且text-align-last:auto時(shí)，最后一個(gè)line box或forced line break后的第一個(gè)line box均采用text-align:start。
?這里由引入另一個(gè)問題了，什么是forced line break呢？首先我們來說說line break吧！line break其實(shí)就是原來位于一個(gè)line box的inline-level boxes，由于某些原因?qū)е耰nline-level boxes分散到多個(gè)line boxes中，有甚者將某個(gè)inline-level box拆分為多個(gè)并分布到多個(gè)相鄰的line box中。而line break中又分為forecd line break和soft wrap break兩種。
forecd line break具體就是通過
或block-level box實(shí)現(xiàn)。
soft wrap break具體是有l(wèi)ine box空間不足所導(dǎo)致的line break。對于soft wrap break而言，還有一個(gè)概念是soft wrap opportunity(abbr. SWO)，就是可拆分的點(diǎn)。這個(gè)涉及到white-space、word-wrap和word-break的具體屬性值了。采用normal默認(rèn)值時(shí)，對于英文、泰語、老撾語等以單詞劃分(word boundary)為SWO，而對于CJK則以音節(jié)劃分(syllable boundary)為SWO，其實(shí)即是以字符劃分作為SWO。
?另外值得注意的是word boundary不包含標(biāo)點(diǎn)符號，僅僅包含(普通空格符，U+0020）和（非斷行空格符，U+00A0）兩種。
?而對于replaced element、display:inline-block等atomic inline-level element而言，它們和CJK一致的SWO。
?還有一點(diǎn)是out-of-flow的元素不會(huì)引發(fā)line break的哦！
更多l(xiāng)ine break信息可參考line-breaking

CSS3中新增的屬性值

justify-all: Same as justify, but also forces the last line to be justified.
start: The same as left if direction of block container is left-to-right and right if that is right-to-left.
end: The same as right if direction of block container is left-to-right and left if that is right-to-left.
match-parent: This value behaves the same as inherit (computes to its parent’s computed value) except that an inherited start or end keyword is interpreted against its parent’s direction value and results in a computed value of either left or right.
?理解了justify后自然就理解justify-all了，可惜現(xiàn)在還沒有瀏覽器實(shí)現(xiàn)了justify-all屬性值。那有沒有辦法pollyfill呢？必須有的，雖然實(shí)現(xiàn)起來有些蛋疼:(

Hi there, welcome 2 fsjohnhuang"s blog! Enjoy FE pls. cu.

具體原理請結(jié)合CSS魔法堂：深入理解line-height和vertical-align理解吧。
另外@張鑫旭老師還妙用text-align:justify了一回，請看display:inline-block/text-align:justify下列表的兩端對齊布局

總結(jié)

上述內(nèi)容若有紕漏請各位指正，謝謝！
尊重原創(chuàng)，轉(zhuǎn)載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/5316591.html^_^肥子John

感謝

CSS text-align 屬性
text-align
CSS3 text-justify 屬性
CSS Text Module Level 2
CSS Text Module Level 3
CSS direction屬性簡介與實(shí)際應(yīng)用