WEB标准:CSS文字定位之两端对齐的多种方法

CSS文字两端对齐,CSS文字左右平齐。

这里说的两端对齐,有点像WORD里的“”这个样式,文字左右是平齐的,这个对英文来说很好用,看起来整齐,不然一般右边都是不齐的。

css如何让一行内的文字两端对齐呢?属性text-align:justify;. 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。

对齐实例

效果如图所示,上部分为对齐的效果,下部分为一般的效果。



代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> WEB标准:css文本定位之两端对齐的详解及实例</title>
</head>
<style>
.my_yes{width:500px;background:#f0f0f0;text-align:justify;text-justify:inter-ideograph;
}
.my_no{width:500px; background:#fefef0;}
</style>

<body>

<div class="my_yes">css如何让一行内的文字两端对齐? [<a href="http://www.ancher.cn/" target="_blank">答案在这里</a>] <br>牙易网(kqyx.cn)于2000年11月正式上线,于2005年7月启用域名kqyx.cn全新运作,一直受到业界的支持与好评。当然,功能不完善和不方便之处还请您包涵,并请不吝赐教、多提宝贵意见和建议。 </div>
<br>
<div class="my_no">css如何让一行内的文字两端对齐? [<a href="http://www.ancher.cn/" target="_blank">答案在这里</a>] <br>牙易网(kqyx.cn)于2000年11月正式上线,于2005年7月启用域名kqyx.cn全新运作,一直受到业界的支持与好评。当然,功能不完善和不方便之处还请您包涵,并请不吝赐教、多提宝贵意见和建议。 </div>

</body>
</html>




[本日志由 ancher 于 2013-01-29 04:04 PM 更新]
上一篇: 做女儿与做儿媳的区别
下一篇: 健康的挑战
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: 文字对齐 WEB标准 CSS
相关日志:
评论: 0 | 引用: 0 | 查看次数: 15205
发表评论
你没有权限发表评论!