时间:2021-07-01 10:21:17 帮助过:185人阅读
- text-justify : auto |inter-word | newspaper | distribute | distribute-all-lines | inter-ideograph
参数:
auto : 允许浏览器用户代理确定使用的两端对齐法则
inter-word : 通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效
newspaper : 通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式
distribute : 处理空格很像newspaper,适用于东亚文档。尤其是泰国
distribute-all-lines : 两端对齐行的方式与distribute相同,也同样不包含两段对齐段落的最后一行。适用于表意字文档
inter-ideograph : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格
说明:
设置或检索对象内文本的对齐方式。
对应的脚本特性为textJustify。请参阅我编写的其他书目。
示例:
- div {text-justify : auto; }
我们有时候会使用正文文字两端对齐,从而达到美化模板的目的。那么文字两端对齐是怎么实现的以及要注意什么问题,详情如下:
目前,对于英文文章,只需要设定 text-align:justify; 就可以实现两端对齐,如下例:
英文两端对齐的设置代码
- <p style="text-align:justify;width:500px;margin:10px auto;border:1px solid red;
- padding:10px;">
- This is the effect of the English text:
- Start:
- W3Schools is optimized for learning, testing, and training.
- Examples might be simplified to improve reading and basic understanding.
- Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.
- While using this site, you agree to have read and accepted our terms of use and privacy policy.
- End.
如果您要处理的是中文,则还需要添加text-justify:inter-ideograph属性,如下例:
中文两端对齐的设置代码
- <p style="text-align:justify;text-justify:inter-ideograph;width:500px;margin:10px auto;
- border:1px solid red;padding:10px;">
- 这是中文文字的效果:
- 测试文字内容区开始:
- 创想信息网—前端开发栏目,关注网站设计、前端开发。
- 创想信息网其他关注方向有——dedecms二次开发、标签使用及优化,计算机故障排除,学习资源分享,
- 开发工具推荐,视频教程汇总,精彩博文推荐,社会经验、情感经历分享、数据库使用以及几个常见的web项目运维。
注意:
标点符号会对布局对齐造成影响,默认情况下大部分主流浏览器会避免让标点符号占据行首,此问题控制较为复杂。
有空格的情况亦不相同,在行末有空格会在此自动换行,标点符号也可在下一行首。
下面创想信息网带大家复习下CSS中text-justify的知识:
text-justify: 参数如下
auto允许浏览器用户代理确定使用的两端对齐法则
inter-word通过增加字之间的空格对齐文本。它的两端对齐行为对段落的最后一行无效。
newspaper增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式。
distribute处理空格很像newspaper,适用于东亚文档。尤其是泰国。
distribute-all-lines两端对齐行的方式与distribute相同,也同样不包含两段对齐段落的最后一行。
inter-ideograph为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格。
以上就是css text-justify属性的使用详解的详细内容,更多请关注Gxl网其它相关文章!