css:文本两端对齐

http://www.cs.tut.fi/~jkorpela/www/justify.html
http://webdesign.about.com/od/styleproperties/p/blsptextalign.htm
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 
  4 <head>
  5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  6 <title>css文本两端对齐详解及实例</title>
  7 
  8 <style type="text/css">
  9 /*
 10 两端对齐大家都知道text-align:justify;
 11 
 12 text-justify确不曾被人们所熟悉，它是干什么的呢？。先来看下语法。
 13 
 14 语法：text-justify : auto |inter-word | newspaper | distribute | distribute-all-lines | inter-ideograph 
 15 参数： 
 16 auto :允许浏览器用户代理确定使用的两端对齐法则 
 17 inter-word :通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效 
 18 newspaper : 通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式 
 19 distribute :处理空格很像newspaper，适用于东亚文档。尤其是泰国 
 20 distribute-all-lines :两端对齐行的方式与distribute相同，也同样不包含两段对齐段落的最后一行。适用于表意字文档 
 21 inter-ideograph : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格 
 22 说明： 
 23 设置或检索对象内文本的对齐方式。 
 24 对应的脚本特性为textJustify。
 25 */
 26 .w1{ width:500px;}
 27 .a1{background:#00FF00;
 28  text-align:justify;/*firefox*/
 29  text-justify:inter-ideograph;/*ie*/
 30  -ms-text-justify: inter-ideograph;/*ie10 ;auto | distribute | distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashida | newspaper*/
 31 }
 32 .a2{ background:#FFFF00;}
 33 .geovindu
 34 {
 35  text-align:justify;/*firefox*/
 36  text-justify:inter-ideograph;/*ie*/
 37 
 38 }
 39 </style>
 40 <style type="text/css">
 41 body { margin-right: 0.7em; }
 42 .just { text-align: justify; }
 43 .summ { font-size : 105%; text-indent : 0;
 44             margin-left : 10%; margin-right : 10%;
 45             padding : 0.2em 0.1em 0.2em 0.4em;}
 46 .minitoc { width: auto; }
 47 body { font-family: Cambria, Georgia, Palatino Linotype; }
 48 th, td { vertical-align: top; }
 49 .important {
 50   clear: both;
 51   max-width: 12em;
 52   float: right;
 53 }
 54 /*small code, .small code, .deem code { font-size : 95%; }*/
 55  
 56 p.literary, .literary p { text-indent : 1em;
 57     margin-bottom : 0;
 58     margin-top : 0; }
 59 
 60 p.first { text-indent : 0 !important; }
 61 
 62 p.start { text-indent : 0;
 63     margin-bottom : 0.5ex; }
 64 
 65 p.start:first-letter { font-size : 200%; font-weight : bold;
 66    color : #060; background : #fff ; }
 67  
 68 </style>
 69 
 70 </head>
 71 <body>
 72 <p>原效果：</p>
 73 <div class="w1 a2">css如何让一行内的文字两端对齐？ text-align:justify;. 这是一篇来自百度知道的问题. 顶部. 热点频道推荐: C/S开发| 数据库| WEB </div>
 74 <p>两端对齐后产效果：</p>
 75 
 76 <div class="w1 a1">css如何让一行内的文字两端对齐？布丁足迹为您答案 text-align:justify;. 这是一篇来自百度知道的问题. 顶部. 热点频道推荐: C/S开发| 数据库| WEB </div>
 77 
 78 <div style="color:#FF0000; font-size:12px; padding-top:10px;">text-justify语法： <br />
 79   text-justify : auto |inter-word | newspaper | distribute | distribute-all-lines | inter-ideograph <br />
 80   参数： <br />
 81   auto :允许浏览器用户代理确定使用的两端对齐法则 <br />
 82   inter-word :通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效 <br />
 83   newspaper : 通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式 <br />
 84   distribute :处理空格很像newspaper，适用于东亚文档。尤其是泰国 <br />
 85   distribute-all-lines :两端对齐行的方式与distribute相同，也同样不包含两段对齐段落的最后一行。适用于表意字文档 <br />
 86   inter-ideograph : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格 <br />
 87   说明：<br />
 88 设置或检索对象内文本的对齐方式。 <br />
 89 对应的脚本特性为textJustify。</div>
 90 <div class="geovindu">两端对齐大家都知道text-align:justify;
 91 
 92 text-justify确不曾被人们所熟悉，它是干什么的呢？。先来看下语法。
 93 
 94 语法：text-justify : auto |inter-word | newspaper | distribute | distribute-all-lines | inter-ideograph 
 95 参数： 
 96 auto :允许浏览器用户代理确定使用的两端对齐法则 
 97 inter-word :通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效 
 98 newspaper : 通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式 
 99 distribute :处理空格很像newspaper，适用于东亚文档。尤其是泰国 
100 distribute-all-lines :两端对齐行的方式与distribute相同，也同样不包含两段对齐段落的最后一行。适用于表意字文档 
101 inter-ideograph : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格 
102 说明： 
103 设置或检索对象内文本的对齐方式。 
104 对应的脚本特性为textJustify。
105 ie 10:(注釋自己谷歌查找)
106 -ms-text-justify: auto | distribute | distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashida | newspaper
107 </div>
108 
109 <h2><a name="def">What is justification?</a></h2>
110 
111 <p align="justify"  style="width:512px;">
112 <dfn><a name="prologue" href="http://www.m-w.com/cgi-bin/dictionary?justify"
113 title="WWWebster dictionary entry for &quot;justify&quot"
114 >Justifying</a></dfn> text can mean different things,
115 but
116 here we consider "justification on both sides", or "double justification",
117 where text lines are justified both on the left and on the right.
118 That is, all lines except (usually) the last one have equal width;
119 the method used to achieve that is typically to leave extra space
120 between words as needed. Such justification is very common in books
121 and other printed matter and often regarded as an essential property
122 of quality print?ing. On computer screens, it's more debatable.
123 But before discussing
124 <a href="http://geovindu.blog.163.com/blog/#why"><em>whether</em> we should try to justify text</a>
125 on our Web pages,
126 we'll discuss the <em>how</em> it could be done.</p> 
127 
128 </body>
129 
130 </html>
posted @ 2013-03-05 16:52 ®Geovin Du Dream Park™ 阅读(2120) 评论(0) 编辑收藏举报
®Geovin Du Dream Park™

why we only heard about haves and have-nots, but we did'nt heard about doers and doer-nots. 人生是一种心境,生活是一种艺术,成功是一种心态,幸福是一种感觉,竞争是一种建构,情感是一种容合.学习是一种成长.

css:文本两端对齐

公告

搜索

常用链接

我的标签

积分与排名

随笔分类

随笔档案

文章分类

相册

捷为工作室

阅读排行榜

评论排行榜

推荐排行榜

最新评论
