css文字两端对齐
css文字两端对齐
text-align:Justify(火狐,Google);
text-justify:inter-ideograph(IE)
1.text-align
语法：
text-align : left | right | center | justify
取值：
left : 默认值。左对齐
right : 右对齐
center : 居中对齐
justify : 两端对齐
说明：
设置或检索对象中文本的对齐方式。
此属性作用于所有块对象(block elements)。在一个 div 对象里的所有块对象的会继承此属性值。 假如属性没有设置，这个参数将获取 null 值。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 textAlign 。
2.text-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 。
实例1：
默认单行不起作用
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style type="text/css"> .div1 { border: 1px solid red; text-align: justify; text-justify:distribute; display: inline-block; width: 60px; } </style> </head> <body> <div class="div1">这是第一个div第一个</div> <br /> <div class="div1">第一个</div> </body> </html>
实例2：
解决单行不起作用
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style type="text/css"> .div1 { border: 1px solid red; text-align: justify; text-justify:distribute; width: 200px; height: 30px; line-height: 30px; overflow: hidden; } .justify_fix { display: inline-block; *display: inline; *zoom: 1; width: 100%; height: 0; overflow: hidden; } </style> </head> <body> <div class="div1">这是第一个div这是第一这是第一</div> <div class="div1">这是第一个div <span class="justify_fix"></span> </div> </body> </html>
实例3：
<html> <head> <title>文本两端对齐 by hongchenok</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> .box { width: 50%; padding: 20px; margin: 20px auto; background-color: #f0f3f9; text-align: justify; text-justify: distribute-all-lines; /*ie6-8*/ } .list { width: 120px; display: inline-block; *display: inline; *zoom: 1; padding-bottom: 20px; text-align: center; vertical-align: top; } .justify_fix { display: inline-block; *display: inline; *zoom: 1; width: 100%; height: 0; overflow: hidden; } .list_head { height: 50px; width: 50px; background-color: red; float: left; } .list_content { width: 70px; height: 50px; float: left; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html .clearfix { height: 1%; } </style> </head> <body> <div class="box"> <div class="list clearfix"> <div class="list_head"></div> <div class="list_content">这是内容</div> </div> <div class="list clearfix"> <div class="list_head"></div> <div class="list_content">这是内容</div> </div> <span class="justify_fix"></span> </div> <div class="box"> <div class="list clearfix"> <div class="list_head"></div> <div class="list_content">这是内容</div> </div> <div class="list clearfix"> <div class="list_head"></div> <div class="list_content">这是内容</div> </div> <div class="list clearfix"> <div class="list_head"></div> <div class="list_content">这是内容</div> </div> <div class="list clearfix"> <div class="list_head"></div> <div class="list_content">这是内容</div> </div> <span class="justify_fix"></span> </div> </body> </html>
要点：
1. inline-block使用及ie兼容
2. 末行填充justify_fix元素
3. ie兼容：text-justify:distribute-all-lines;
