CSS魔法堂:你真的懂text-align吗?
前言
也许提及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 | <string> | 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. 示例:
<style type="text/css">
p{
width: 200px;
border: dotted 1px #000;
}
.ltr{direction:ltr;}
.rtl{direction:rtl;}
.left{text-align:left;}
.right{text-align:right;}
.center{text-align:center;}
.justify{text-align:justify;}
</style>
<p class="ltr">
direction left:As most young candidates for the pains and penalties
</p>
<p class="rtl">
direction right:As most young candidates for the pains and penalties
</p>
<p class="left">
left:As most young candidates for the pains and penalties
</p>
<p class="right">
right:As most young candidates for the pains and penalties
</p>
<p class="center">
center:As most young candidates for the pains and penalties
</p>
<p class="justify">
justify:As most young candidates for the pains and penalties
</p>
这里我们要注意一下,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 | <length> | inherit Initial: normal Applies to: all elements Inherited: yes Percentages: N/A Media: visual Computed value: 'normal' or absolute length
normal:根据当前字体和字体大小,由UA自定义的水平距离。 <length>:可正可负,字形间最终的水平距离 = UA自定义的水平距离 + length值
word-spacing干嘛了?
word-spacing就是用于定义两个单词间的水平距离。
'word-spacing' Value: normal | <length> | 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自定义的水平距离。 <length>:可正可负,单词间最终的水平距离 = UA自定义的水平距离 + length值 注意:word-spacing作用于word-separator characters。而定义的word-separator characters有<SP>(普通空格符,U+0020)和<NBSP>(非断行空格符,U+00A0)两种。word-spacing所指定的距离会紧跟在word-separator characters后面。其他字符均不受word-spacing的影响。——也就是说word-spacing的单词间距只是我们日常当中的“单词间距”的子集而已。
<p>letter-spacing:normal; word-spacing:normal;</p>
<p style="letter-spacing:2px;word-spacing:normal;">letter-spacing:2px; word-spacing:normal;</p>
<p style="letter-spacing:-2px;word-spacing:normal;">letter-spacing:-2px; word-spacing:normal;</p>
<p style="letter-spacing:normal;word-spacing:10px;">letter-spacing:2px; word-spacing:10px;</p>
<p style="letter-spacing:normal;word-spacing:-10px;">letter-spacing:2px; word-spacing:-10px;</p>
<p style="word-spacing:1000px;">word-spacing(1000px)-doesn't-affect-other-characters</p>
深入text-align:justify
<p style="width:150px;border:dotted 1px #000;word-wrap:break-word;text-align:auto;">
pure alphanumeric 123 432112 12313123124123
</p>
<p style="width:150px;border:dotted 1px #000;word-wrap:break-word;text-align:justify;">
pure alphanumeric 123 432112 12313123124123
</p>
<p style="width:170px;border:dotted 1px #000;word-wrap:break-word;letter-spacing:100px;">
本届集团公司党委由公司党委由
</p>
<p style="width:170px;border:dotted 1px #000;word-wrap:break-word;text-align:justify;">
本届集团公司党委由公司党委由
</p>
<p style="width:160px;border: dotted 1px #000;">
ภ า ษ า ไ ท ย ภ า ษ า ไ ท ย ภ า ษ า ไ ท ย
</p>
<p style="width:160px;border: dotted 1px #000;word-wrap:break-word;text-align:justify;">
ภ า ษ า ไ ท ย ภ า ษ า ไ ท ย ภ า ษ า ไ ท ย
</p>
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具体就是通过<br/>
或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不包含标点符号,仅仅包含<SP>(普通空格符,U+0020)和<NBSP>(非断行空格符,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呢?必须有的,虽然实现起来有些蛋疼:(
<style type="text/css">
/* polyfill 4 justify-all*/
.justify-all{
text-align:justify;
line-height:0;
}
.justify-all .content{
line-height:normal;
}
.justify-all .polyfill{
display:inline-block;
*display:inline;
zoom:1;
width:100%;
vertical-align:top;
}
</style>
<p style="width:150px;border:dotted 1px blue;text-align:justify;">
Hi there, welcome 2 fsjohnhuang's blog! Enjoy FE pls. cu.
</p>
<p style="width:150px;border:dotted 1px red;" class="justify-all">
<span class="content">Hi there, welcome 2 fsjohnhuang's blog! Enjoy FE pls. cu.</span><i class="polyfill"></i>
</p>
具体原理请结合CSS魔法堂:深入理解line-height和vertical-align理解吧。
另外@张鑫旭老师还妙用text-align:justify
了一回,
请看display:inline-block/text-align:justify下列表的两端对齐布局
总结
上述内容若有纰漏请各位指正,谢谢!
感谢
CSS text-align 属性 text-align CSS3 text-justify 属性 CSS Text Module Level 2 CSS Text Module Level 3 CSS direction属性简介与实际应用
- VR技术的进步推动工业机器人革命
- tLinux 2.2下安装Mono 4.8
- WordPress评论回复邮件样式美化教程
- 基于Aspose.Pdf把pdf文件每一页转换为图片
- 分布式文件存储的数据库开源项目MongoDB
- 使用 JavaScriptService 在.NET Core 里实现DES加密算法
- 拒绝全英文垃圾评论!仅用代码实现
- 在.NET Core 里使用 BouncyCastle 的DES加密算法
- 微信小程序:为了满足三方需求,我们一直在改变
- 让陌生人能够相互自由交易和支付
- 斯坦福发布首份 AI Index 报告,AI 研究者不再茫然
- jQuery仿极客公园火箭发射“返回顶部”效果(初始篇)
- Java程序员必读,Java设计模式应该遵循哪些原则
- Visual Studio 2010快速参考指南里头的Scrum海报
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Java——对象序列化
- Android——MPAndroidChart折线图/柱状图/饼形图的使用
- Java——对String类型的时间进行加减操作
- Java——枚举基础应用总结(多例设计模式、Enum类、枚举的实际应用)
- Java——Annotation注解基本总结(简介、覆写、过期声明、压制警告)
- JavaWeb——一文快速入门BootStrap(栅格系统、全局CSS样式、组件、插件、基于BootStrap的官网案例实战)
- JavaWeb——XML入门详解(概述、语法、约束、Jsoup解析、Xpath解析)
- JavaWeb——CSS应用实例详解(概述、语法、选择器、属性、用户登录界面实例)
- JavaWeb——JavaScript精讲之事件监听机制与表单校验案例实战
- Java——扩展概念(匿名内部类、包装类、装箱与拆箱、数据类型的转换)
- Java——接口的基本总结(基本定义、使用接口定义标准、工厂设计模式、代理设计模式、抽象类与接口的区别)
- JavaWeb——HTML表单标签详解(input、label、select、textarea)
- Java——设计辅助概念(final关键字、对象多态性基本概念)
- JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战(动态添加删除表格)
- JavaWeb——JavaScript精讲之ECMAScript标准(基本语法、JavaScript对象)