css 文字两端对齐实例详解

发布时间:2020-05-06编辑:脚本学堂
本文介绍了css 文字两端对齐的实现方法,css中text-align、text-justify实现文字两端对齐的效果,通过实例掌握两端对齐的实现方法,有需要的朋友参考下。

css文字两端对齐css 文字两端对齐
text-align:Justify(火狐);
text-justify:inter-ideograph(IE)

text-justify(IE)

一,基本语法
text-justify : auto | distribute | distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashida | newspaper

二,语法取值
 

auto : 默认值。允许浏览器代理用户确定使用的两端对齐法则
distribute : 处理空格很像 newspaper ,适用于东亚文档。尤其是泰文
distribute-all-lines : 两端对齐行的方式与
distribute 相同,也同样不包含两段对齐段落的最后一行。适用于表意字文档
distribute-center-last : 未实现
inter-cluster : 调整文本无词间空格的行。这种模式的调整是用于优化亚洲语言文档的
inter-ideograph : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格
inter-word : 通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效
kashida : 通过拉长选定点的字符调整文本。这种调整模式是特别为阿拉伯脚本语言提供的。需要IE5.5+支持
newspaper : 通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式

二,使用说明
设置或检索对象内调整文本使用的对齐方式。 因为这个属性影响文本布局,所以 text-align 属性必须被设置为 justify 。 此属性只作用于块对象。 此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。 对应的脚本特性为 textJustify 。

例子:
 

复制代码 代码示例:
div {text-justify : auto; text-align:justify; }

text-justify演示(IE):
text-justify:auto;
css文字两端对齐

text-justify:distribute;
css文字两端对齐2

text-justify:inter-cluster;

css文字两端对齐3

text-justify:inter-ideograph;

css文字两端对齐4

text-justify:inter-word;

css文字两端对齐5

text-justify:kashida;

css文字两端对齐6

以上介绍了css实现文字两端对齐的方法,希望对大家有所帮助。