text-justify
这个 属性 不怎么常用,因为它的兼容性不好,只兼容 IE 浏览器,它主要是给对齐 属性 text-align:justify 做 一个 补充。
1. 官方定义
改变字与字之 间的 间距使得每行对齐。
2. 解释
这个 属性 主要用来 页面 文字 的排版,如果我们 一个 段落不设置任何 属性 ,那么它的每一行有长有短,很不美观,通过这个 属性 ,可以让每一行都能实现左右对齐。
我们首先要设置 text-align:justify 然后再设置 text-justify 去告诉浏览器使用什么样的排版方式让 文字 对齐。而不设置 text-justify 浏览器则使用 默 认的方式让其实现两端对齐。
这个 属性 只兼容 IE 浏览器。而其他浏览器的对齐方式仅受 text-align:justify 对齐方式的影响。
3. 语法
.demo { text-align : justify ; text-justify : inter-word ; }
属性 值说明
值 描述 auto 浏览器自行渲染 none 禁用齐行。 inter-word 增加 /减少单词 间的 间隔。 inter-ideograph 用表意文本来排齐 内容 。 inter-cluster 只对不包含内部单词间隔的 内容 (比如亚洲语系)进行排齐。 distribute 类似报纸版面,除了在东亚语系中最后一行是不齐行的。 kashida 通过拉伸字符来排齐 内容 。
4. 兼容性
IE Edge Firefox Chrome Safari Opera ios android 9+ no no no no no no no
5. 实例
默 认 文字 排版。
< div class = " demo " > To a large degree, the measure of our peace of mind is deter mine d by how much we are able to live in the present moment. </ div > < div class = " demo-1 " > 轻轻的我走了, 正如我轻轻的来; 我轻轻的招手, 作别西天的云彩。 那河畔的金柳, 是夕阳中的新娘; 波光里的艳影, 在我的心头荡漾。 软泥上的青荇, 油油的在水底招摇; 在康河的柔波里, 我甘心做一条水草! </ div >
.demo { background : #f2f2f2 ; margin-b ott om : px ; } .demo-1 { background : #a2a2a2 ; }
效果 图
默 认 文字 排版 效果 图
说明:这两端字符第一段是英文,第二段是 中文 他们都没有实现两端对齐。 中文 还好,英文的排版最差,这是因为英文单词不像汉字,它长短不一。
下面我们通过设置 text-justify 中包含的各种 属性 来看看,他们都是怎么实现两端对齐的。
使用浏览器 默 认对齐方式。
.demo { background : #f2f2f2 ; margin-b ott om : px ; text-align : justify ; } .demo-1 { background : #a2a2a2 ; text-align : justify ; }
或
.demo { background : #f2f2f2 ; margin-b ott om : px ; text-align : justify ; text-justify : auto ; } .demo-1 { background : #a2a2a2 ; text-align : justify ; text-justify : auto ; }
效果 图
浏览器 默 认对齐方式 效果 图
说明:直接设置 text-align:justify; 就会实现 文字 两端对齐,对齐方式使用浏览器 默 认方式。
使用 inter-ideograph 来实现 文字 对齐。
.demo { background : #f2f2f2 ; margin-b ott om : px ; text-align : justify ; text-justify : inter-ideograph ; } .demo-1 { background : #a2a2a2 ; text-align : justify ; text-justify : inter-ideograph ; }
效果 图
使用 `inter-ideograph` 来实现 文字 对齐 效果 图
说明:通过设置 inter-ideograph ,让IE浏览器使用表意文本对齐方式对齐 内容 。
使用 inter-word 来实现文本排版对齐。
.demo { background : #f2f2f2 ; margin-b ott om : px ; text-align : justify ; text-justify : inter-word ; } .demo-1 { background : #a2a2a2 ; text-align : justify ; text-justify : inter-word ; }
效果 图
使用 `inter-word` 来实现文本排版对齐 效果 图
说明:如图所示, 文字 还是对齐了,如果和 inter-ideograph 的 效果 图对比还是有细微差别,它的对齐方式 修改 了单词之 间的 距离。所以说这只是 IE浏览器在对齐的时候一种排版方式。
使用 inter-cluster 来实现文本排版对齐。
.demo { background : #f2f2f2 ; margin-b ott om : px ; text-align : justify ; text-justify : inter-cluster ; } .demo-1 { background : #a2a2a2 ; text-align : justify ; text-justify : inter-cluster ; }
效果 图
使用 `inter-cluster` 来实现文本排版对齐 效果 图
由此可见使用其他 属性 distribute 、 kashida 都只是改变 IE 浏览器的一种对齐方式。
6. 小结
要使用这个 属性 一定要先设置 text-align:justify; 且仅仅兼容 IE 浏览器。
text-overflow 文字超出 ? ?gradients 渐变