CSS3 justify 文本两端对齐

浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE5.5 and Later

两端对齐方案基于 text-align:justify 及 text-align-last:justify 实现

<div>How are you. 你 好 !<div>

由于大部分浏览器两端对齐的实现,都是通过调整字之间的空格大小来达成的,所以我们事先在每个单词和汉字间都插入一个空格

IE实现

div{

text-align:justify;

text-align-last:justify;

}

justify最先是作为IE私有属性实现

Firefox实现

div{

text-align:justify;

-moz-text-align-last:justify;

}

text-align-last 在Firefox12-17下仍处理实验支持阶段,需加前缀 -moz-

Chrome, Safari, Opera实现

div{

overflow:hidden;

height:19px;

text-align:justify;

}

div:after{

display:inline-block;

content:‘‘;

overflow:hidden;

width:100%;

height:0;

}

Chrome23, Safari5.1.7, Opera12.11 不支持 text-align-last, 但支持 text-align 的 jsutify, 所以这里可以变通实现单行文本两端对齐对齐,我们知道text-align:justify 不处理块内的最后一行文本(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)及被强制打断的行的两端对齐,但会处理除此之外的其它行,所以只需要将这里的单行变成多行即可,那么我们可以使用伪对象的方式派生出新行,这样不需要额外处理html代码,然后再将派生出的新行隐藏

综合实现

div{

overflow:hidden;

height:19px;

text-align:justify;

text-align-last:justify;

}

div:after{

display:inline-block;

content:‘‘;

overflow:hidden;

width:100%;

height:0;

}

由于所有浏览器都支持 text-align 的 justify 属性值,但不全支持 text-align-last,我们可以对非IE及IE7以上浏览器使用伪对象生成额外的内容(IE7及以下浏览器不支持伪对象,使用text-align-last处理),置于第二行并将其隐藏,这时第一行文本(即要对齐的那个单行文本)可使用text-align:justify来对齐,所以Firefox也无需使用-moz-text-align-last了,因为也使用了text-align:justify

时间: 2024-11-03 21:28:36

CSS3 justify 文本两端对齐的相关文章

【text-align】CSS3新增文本两端对齐

text-align参数值与说明: left:内容左对齐.center:内容居中对齐.right:内容右对齐.justify:内容两端对齐,但对于强制打断的行(被打断的这一行)及最后一行(包括仅有一行文本的情况,因为它既是第一行也是最后一行)不做处理.(CSS3)start:内容对齐开始边界.(CSS3)end:内容对齐结束边界.(CSS3)match-parent:这个值和 inherit 表现一致,只是该值继承的 start 或 end 关键字是针对父母的 <' direction '>

不同浏览器下兼容文本两端对齐

在form表单的前端布局中,我们经常需要将文本框的提示文本两端对齐,例如: 比较粗暴的做法是在需要隔离边距的文本中加标签,然后分别控制每个文字的边距,这种方法比直接加空格或者占位符更精准,我之前也都是这么做的.但是写的多了之后开始思考能不能抽象出来用于更多的场景?让代码更好看一些?维护成本更低一些? 1.首先想到是能不能直接靠css解决问题 css .test-justify { text-align: justify; } html <div class="test-justify&qu

css实现文本两端对齐

要实现文本两端对齐,自然会想到css属性text-align: justify;但是试过之后才发现这个属性没有起到作用,这是为什么呢?难道这个属性是个摆设吗?那肯定不是!一定是自己的问题. 查看html代码才知道,原来text-align: justify;这个css属性要起作用,那么html中模块之间一定要添加(空格.换行符.制表符),例如 <p> <span>专 场:</span> 东方源创文玩收藏拍卖专场 </p> <p> <span

css 文本两端对齐

在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地.这样我们就要用到 text-align, text-justify样式了. text-align直接设为justify就行了,text-justify的情况就复杂了,可能有人对它还不熟悉.IE的取值如下: auto :允许浏览器用户代理确定使用的两端对齐法则 inter-word :通过增加字之间的空格对齐文本.该行为是对齐所有文本行最快的方法.它的两端对齐行为对段落的最后一行无效 newspaper : 通过增加或

css文本两端对齐

在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地.这样我们就要用到 text-align, text-justify样式了. text-align直接设为justify就行了,text-justify的情况就复杂了,可能有人对它还不熟悉.IE的取值如下: auto :允许浏览器用户代理确定使用的两端对齐法则 inter-word :通过增加字之间的空格对齐文本.该行为是对齐所有文本行最快的方法.它的两端对齐行为对段落的最后一行无效 newspaper : 通过增加或

css之文本两端对齐

在进行网页设计时,我们经常会看到这样的样式:文本两端对齐. css为我们提供了一个属性可以实现这样的效果:text-align: justify.不过这个只能用来设置多行文本(除最后一行).如果只有单行的话,是不起效果的.那怎么办呢?这里有两种解决方案: 第一种 借助伪元素或者内联元素使文本不是最后一行.具体代码: <form> <p> <label>用户名</label>: <input type="text"> </

关于文本两端对齐的处理!

<div> <p>对照组1:文档流<span></span></p> <p>对照组2:两端对齐(本组支持谷歌)<span></span></p> <p>对 照 组3:两 端 对 齐 ( 本 组 支 持 谷 歌.火狐 .IE9+)<span></span></p> <p>对照组4:我们不保证内容的正确性.通过使用本站内容随之而来的风险与本站无

文本两端对齐

text-justify 設定段落中各句如何調整,使段落左右之邊界對齊.可用值有:inter-word(利用調整字距)newspaper(利用調整字距或字母間距) distribute(與newspaper很像,但最適用於東亞)distribute-all-lines(連最後一行也調整至同寬,一般不會用這 個值)inter-ideograph(利用增加或減少字距來調整)auto(由瀏覽器語系決定) 這個性質要IE5.0以上才能使用,一般都用 text-justify:auto. 利用text-a

text-align:justify实现文本两端对齐布局,兼容IE

要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清楚的概念.大多 IE下的显示错误,就是源于 haslayout. 什么是 haslayout ? haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分.在Internet Explorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容.为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,