您现在的位置是: 首页 » 网页代码 » css如何设置中英文混合两端对齐
网页代码

css如何设置中英文混合两端对齐

网站优化小编十一月 2, 2019 5人已围观

css中英文混合实现两端对齐?下面网页制作代码教程栏目就来给大家介绍一下使用CSS设置中英文混合两端对齐的方法,希望对大家有所帮助。

网站运营中栏目排名优化技巧

一般的两端对齐是使用text-align:justify,但是text-align:justify一般情况下只针对英文管用。

text-align:justify;用来设置英文两端对齐。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。但是对于中文这样是不行的。

因为css是老外设计的,老外在justify判断的时候,是根据单词直接的空格来的,中文两个汉字之间没有空格,所以大部分情况下text-align:justify不管用,所以这个属性大部分形同虚设!。

解决办法就是设定:

text-align:justify;text-justify:inter-ideograph;

text-justify属性

text-justify属性定义的是当文本的 text-align 属性被设置为 :justify 时的齐行方法。

语法:

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 。

以上方法对chrome(360也是chrome内核)无效,还需再加上下面代码:

word-break:break-all

文章评论

    发表评论

    电子邮件地址不会被公开。