A-A+

td中文字用css两端对齐

2015年07月02日 htmlcss 暂无评论 阅读 545 次

方法一.如果是 Unicode 编码,   表示全角的 中文空格 。 在HTML网页里可以用“   ”来打印空格, 多个空格 写法如下:

<html> <div> test  test  </div> </html>

方法二.全角空格

全角空格就是把输入法转换到全角,然后打空格键就行了.html里面只认半角符号,不认全角符号。所以输入全角空格,就如同输入汉字一样,可以显示的。

  • &nbsp; 半角的不断行的空白格(推荐使用)
  • &ensp;  半角的空格
  • &emsp;  全角的空格

方法三.

<!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 &quot;justify&quot"
>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>

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利.   Theme  Ality

用户登录