css:文本两端对齐-阿里云开发者社区

css:文本两端对齐

2013-03-05 1249

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： <!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>

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>css文本两端对齐详解及实例</title>

<style type="text/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。
*/
.w1{ width:500px;}
.a1{background:#00FF00;
 text-align:justify;/*firefox*/
 text-justify:inter-ideograph;/*ie*/
 -ms-text-justify: inter-ideograph;/*ie10 ;auto | distribute | distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashida | newspaper*/
}
.a2{ background:#FFFF00;}
.geovindu
{
 text-align:justify;/*firefox*/
 text-justify:inter-ideograph;/*ie*/

}
</style>
<style type="text/css">
body { margin-right: 0.7em; }
.just { text-align: justify; }
.summ { font-size : 105%; text-indent : 0;
            margin-left : 10%; margin-right : 10%;
            padding : 0.2em 0.1em 0.2em 0.4em;}
.minitoc { width: auto; }
body { font-family: Cambria, Georgia, Palatino Linotype; }
th, td { vertical-align: top; }
.important {
  clear: both;
  max-width: 12em;
  float: right;
}
/*small code, .small code, .deem code { font-size : 95%; }*/
 
p.literary, .literary p { text-indent : 1em;
    margin-bottom : 0;
    margin-top : 0; }

p.first { text-indent : 0 !important; }

p.start { text-indent : 0;
    margin-bottom : 0.5ex; }

p.start:first-letter { font-size : 200%; font-weight : bold;
   color : #060; background : #fff ; }
 
</style>

</head>
<body>
<p>原效果：</p>
<div class="w1 a2">css如何让一行内的文字两端对齐？ text-align:justify;. 这是一篇来自百度知道的问题. 顶部. 热点频道推荐: C/S开发| 数据库| WEB </div>
<p>两端对齐后产效果：</p>

<div class="w1 a1">css如何让一行内的文字两端对齐？布丁足迹为您答案 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>
<div class="geovindu">两端对齐大家都知道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。
ie 10:(注釋自己谷歌查找)
-ms-text-justify: auto | distribute | distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashida | newspaper
</div>

<h2><a name="def">What is justification?</a></h2>

<p align="justify"  style="width:512px;">
<dfn><a name="prologue" href="http://www.m-w.com/cgi-bin/dictionary?justify"
title="WWWebster dictionary entry for "justify""
>Justifying</a></dfn> text can mean different things,
but
here we consider "justification on both sides", or "double justification",
where text lines are justified both on the left and on the right.
That is, all lines except (usually) the last one have equal width;
the method used to achieve that is typically to leave extra space
between words as needed. Such justification is very common in books
and other printed matter and often regarded as an essential property
of quality print?ing. On computer screens, it's more debatable.
But before discussing
<a href="http://geovindu.blog.163.com/blog/#why"><em>whether</em> we should try to justify text</a>
on our Web pages,
we'll discuss the <em>how</em> it could be done.</p> 

</body>

</html>

css:文本两端对齐

热门文章

最新文章

相关课程

相关电子书

相关实验场景