css:文本两端对齐

最新推荐文章于 2023-11-20 15:42:49 发布

geovi

最新推荐文章于 2023-11-20 15:42:49 发布

阅读量1k

点赞数

分类专栏： css 文章标签： text-justify

本文链接：https://blog.csdn.net/geovi/article/details/8638706

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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>

geovi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css:文本两端对齐

css文本两端对齐详解及实例/*两端对齐大家都知道text-align:justify;text-justify确不曾被人们所熟悉，它是干什么的呢？。先来看下语法。语法：text-justify : auto |inter-word | newspaper | distribute | distribute-all-lines | inter-ideograph
复制链接

扫一扫

专栏目录