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 渐变