css text-justify属性的使用详解

语法： 

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属性的使用详解的详细内容，更多请关注php中文网其它相关文章！