布丁足迹

千里始足下,高山起微尘,吾道亦如此,行之贵日新。

css文本两端对齐详解及实例

有时候文章里有英文,还有中文,特别是在加一些特殊符号,文章尾部就很难对齐。还好CSS有控制两端对齐属性。
下面我写了个实例,IE6、IE7、FF\火狐好用!其它浏览器的未测。

下面是HTML源文件,直接复制源码新建HTML看效果!

<!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>布丁足迹ddhbb.com(css文本两端对齐详解及实例)</title>
</head>
<style>
.w1{ width:500px;}
.a1{background:#00FF00;
 text-align:justify;text-justify:inter-ideograph;
}
.a2{ background:#FFFF00;}
</style>

<body>
<p>原效果:</p>
<div class="w1 a2">css如何让一行内的文字两端对齐? [<a href="http://www.ddhbb.com/" target="_blank">布丁足迹为您答案</a>] text-align:justify;. 这是一篇来自百度知道的问题. 顶部. 热点频道推荐: C/S开发| 数据库| WEB </div>
<p>两端对齐后产效果:</p>

<div class="w1 a1">css如何让一行内的文字两端对齐? [<a href="http://www.ddhbb.com/" target="_blank">布丁足迹为您答案</a>] text-align:justify;. 这是一篇来自百度知道的问题. 顶部. 热点频道推荐: C/S开发| 数据库| WEB </div>

<div style="color:#FF0000; font-size:12px; padding-top:10px;">text-justify语法: <br />
  text-justify : auto |inter-word | newspaper | distribute | distribute-all-lines | inter-ideograph <br />
  参数: <br />
  auto :允许浏览器用户代理确定使用的两端对齐法则 <br />
  inter-word :通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效 <br />
  newspaper : 通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式 <br />
  distribute :处理空格很像newspaper,适用于东亚文档。尤其是泰国 <br />
  distribute-all-lines :两端对齐行的方式与distribute相同,也同样不包含两段对齐段落的最后一行。适用于表意字文档 <br />
  inter-ideograph : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格 <br />
  说明:<br />
设置或检索对象内文本的对齐方式。 <br />
对应的脚本特性为textJustify。</div>
</body>
</html>
 

更多
« 鉴材315整站网络视频下载方法! »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

黄金广告位求包养

最会抢沙发的淫

宣传推广栏

完全随机文章

最新评论及回复

最近留言

Powered By Z-Blog 1.8 Walle Build 100427

[过度上网,有害健康]    感谢诚网科技提供空间
版权所有 © 2007-2010 布丁足迹 辽ICP备08100443号

你敢来踩,我就敢回踹