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="512px;"> 112 <dfn><a name="prologue" href="http://www.m-w.com/cgi-bin/dictionary?justify" 113 title="WWWebster dictionary entry for "justify"" 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>