资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/CSS魔法堂：你真的懂text-align吗？

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

tinylcy / 3193人阅读

摘要：深入本届集团公司党委由公司党委由本届集团公司党委由公司党委由组均是，而组则是。下英文泰文等的默认对齐方式，下的默认对齐方式等同于，采用增加减少象形文字间的距离。

前言

也许提及text-align你会想起水平居中，但除了这个你对它还有多少了解呢？本篇打算和大家一起来跟text-align来一次负距离的交往，你准备好了吗？

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所设置的是以inline-level box所在的line box作为参考系来进行水平排列对齐，而不是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.

在此我们先要打个岔，先理解letter-spacing,word-spacing，不然无法真正理解text-align:justify的原理。

字形、单词间的水平距离 letter-spacing干嘛了？

letter-spacing就是用于定义两个字形间的水平距离。

"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:根据当前字体和字体大小，由UA自定义的水平距离。
:可正可负，字形间最终的水平距离 = UA自定义的水平距离 + length值

word-spacing干嘛了？

word-spacing就是用于定义两个单词间的水平距离。

"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:根据当前字体和字体大小，由UA自定义的水平距离。
:可正可负，单词间最终的水平距离 = UA自定义的水平距离 + length值
注意：word-spacing作用于word-separator characters。而定义的word-separator characters有(普通空格符，U+0020）和（非断行空格符，U+00A0）两种。word-spacing所指定的距离会紧跟在word-separator characters后面。其他字符均不受word-spacing的影响。——也就是说word-spacing的单词间距只是我们日常当中的“单词间距”的子集而已。

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




pure alphanumeric 123 432112 12313123124123




本届集团公司党委由公司党委由




本届集团公司党委由公司党委由




ภ า ษ า ไ ท ย ภ า ษ า ไ ท ย ภ า ษ า ไ ท ย




ภ า ษ า ไ ท ย ภ า ษ า ไ ท ย ภ า ษ า ไ ท ย


a组均是text-align:start，而b组则是text-align:justify。可以看到text-align:justify有两个特点：

通过调整字符或单词间的距离，实现第一个/最后一个inline-level boxes与line box的左右边框对齐；

最后一个line box内的inline-level boxes采用的不是text-align:justify。而是采用text-align:start。

 第1点说到"字符或单词间的距离",自然会联想到上面所说的letter-spacing和word-spacing属性，但只要采用text-align:justify，那么上述两者之一的属性值将失效。若调整的是"字符间的距离"则letter-spacing失效，若调整的是"单词间的距离"则是word-spacing失效。
 那问题来了，到底什么时候是"字符间的距离"什么时候是"单词间的距离"呢？
 CSS3中引入了新属性text-justify:auto|none|inter-word|inter-ideograph|inter-cluster|distribute|kashida用于对text-align:justify具体的对齐算法作调整，虽然现在仅仅IE支持该属性，但不妨外我们通过它来了解具体的对齐算法规则。
inter-word: 采用增加/减少单词间的距离。chrome下英文、泰文等的默认对齐方式，IE5.5~9下CJK的默认对齐方式；
inter-ideograph: 等同于inter-letter，采用增加/减少象形文字间的距离。chrome下CJK(中日韩文)等的默认对齐方式;
而text-align:justify的默认方式text-justify:auto: 则是对英文、泰文采用inter-word方式，对CJK采用inter-ideograph方式。
注意：具体对哪类语言采用哪种方式是由浏览器决定！
 而第2点说到"最后一个line box内的inline-level box采用的是text-align:start"，这个我们也可以参考CSS3的新属性text-align-last。当text-align:justify且text-align-last:auto时，最后一个line box或forced line break后的第一个line box均采用text-align:start。
 这里由引入另一个问题了，什么是forced line break呢？首先我们来说说line break吧！line break其实就是原来位于一个line box的inline-level boxes，由于某些原因导致inline-level boxes分散到多个line boxes中，有甚者将某个inline-level box拆分为多个并分布到多个相邻的line box中。而line break中又分为forecd line break和soft wrap break两种。
forecd line break具体就是通过
或block-level box实现。
soft wrap break具体是有line box空间不足所导致的line break。对于soft wrap break而言，还有一个概念是soft wrap opportunity(abbr. SWO)，就是可拆分的点。这个涉及到white-space、word-wrap和word-break的具体属性值了。采用normal默认值时，对于英文、泰语、老挝语等以单词划分(word boundary)为SWO，而对于CJK则以音节划分(syllable boundary)为SWO，其实即是以字符划分作为SWO。
 另外值得注意的是word boundary不包含标点符号，仅仅包含(普通空格符，U+0020）和（非断行空格符，U+00A0）两种。
 而对于replaced element、display:inline-block等atomic inline-level element而言，它们和CJK一致的SWO。
 还有一点是out-of-flow的元素不会引发line break的哦！
更多line 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了，可惜现在还没有浏览器实现了justify-all属性值。那有没有办法pollyfill呢？必须有的，虽然实现起来有些蛋疼:(




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




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

具体原理请结合CSS魔法堂：深入理解line-height和vertical-align理解吧。
另外@张鑫旭老师还妙用text-align:justify了一回，请看display:inline-block/text-align:justify下列表的两端对齐布局

总结

上述内容若有纰漏请各位指正，谢谢！
尊重原创，转载请注明来自：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属性简介与实际应用

云服务器 GPU云服务器 广告联盟是真的吗 linux系统真的安全吗 中国物联网是真的吗 uu492是真的吗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115151.html

相关文章

  • CSS魔法堂：重拾Border之——更广阔的遐想

    摘要：也就是说我们操作的几何公式中的未知变量，而具体的画图操作则由渲染引擎处理，而不是我们苦苦哀求设计师帮忙。 前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时，实际值会按比...

    lily_wang 评论0 收藏0

  • CSS魔法堂：重拾Border之——解构Border

    摘要：本系列将稍微深入探讨一下那个貌似没什么好玩的魔法堂重拾之解构魔法堂重拾之图片作边框魔法堂重拾之不仅仅是圆角魔法堂重拾之更广阔的遐想解构说起我们自然会想起，而由条紧紧包裹着的边组成，所以的最小操作单元是。 前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现...

    lingdududu 评论0 收藏0

  • CSS魔法堂：你真的理解z-index吗？

    摘要：与的映射关系为。与根对应的对应的层叠上下文，是其他的祖先，的范围覆盖整条。注意的默认值为，自动赋值为。对于，它会将赋予给对应的，而则不会。 一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  假如只是开发简单的弹窗效果，懂得通过z-index来调整元素间的层叠关系就够了。但要将多个弹窗间层叠关系给处理好，那么充分理解z-index背后的原理及兼容性问题就是必要的知识...

    andycall 评论0 收藏0

  • CSS魔法堂：重拾Border之——图片作边框

    摘要：一铺搞定一铺清袋粤语的一铺搞定其实就是一次完成全部工作的意思，上面关于的属性，要是每次都逐个设置那要敲多少次键盘啊。。。语法粤语的一铺清袋其实就是把之前的成果一次性归零。 前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/...

    linkFly 评论0 收藏0

  • CSS魔法堂："那不是bug，是你不懂我!" by inline-block

    摘要：那不是，是我不懂而已。的用途之一西文是以空格来分隔单词的，而汉字间则无需空格分隔，但为了统一西文东亚和的排版，于是抽象出一个名为的概念用于分隔词义单元，则作为的值域，而定义域就是语言信息。 前言 每当来个需要既要水平排版又要设置固定高宽时，我就会想起display:inline-block，还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;。然后发...

    cucumber 评论0 收藏0

发表评论

登陆后可评论

0条评论

tinylcy

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<