浏览器参照基准: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

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

  1. CSS3单行文本两端对齐

    CSS3实现单行文本两端对齐 p { height: 24px; text-align: justify; text-last-align: justify; } p::after { display ...

  2. css之文本两端对齐

    在进行网页设计时,我们经常会看到这样的样式:文本两端对齐. css为我们提供了一个属性可以实现这样的效果:text-align: justify.不过这个只能用来设置多行文本(除最后一行).如果只有单 ...

  3. css文本两端对齐

    在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地.这样我们就要用到 text-align, text-justify样式了. text-align直接设为justify就 ...

  4. css之文本两端对齐的两种解决方法

    说起文本对齐,大家都知道text-align,最常用的有left.right.center,今天我们说一下justify,也就是文本两端 对齐.说起来简单,但是有些小坑大家还是要注意的. 现在我们有这 ...

  5. HTML如何让文本两端对齐

    <p style="text-align:justify; text-justify:inter-ideograph;>日本驻华大使丹羽宇一郎:日中关系比夫妻还紧密日本驻华大使丹 ...

  6. css 文本两端对齐

    在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地.这样我们就要用到 text-align, text-justify样式了. text-align直接设为justify就 ...

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

    要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清楚的概念.大多 IE下的显示错误,就是源于 haslayout. 什么是 haslayout ...

  8. css实现文本两端对齐

    display:inline-block; text-align:center; text-align-last:justify;

  9. css:段落文本两端对齐

    效果图: Css:

随机推荐

  1. BZOJ3489: A simple rmq problem

    设$i$的前驱为$p_i$,后继为$q_i$,把询问看成点$(L,R)$,有贡献的$i$满足$L\in(p_i,i]$且$R\in[i,q_i)$,询问的就是覆盖这个点的矩形的最大值.那么可以用可持久 ...

  2. nginx 499 状态码优化

    在grafana界面中发现不少499的状态码,在网上了解到出现499的原因大体都是说服务端处理时间过长,客户端主动关闭了连接.   既然原因可能是服务端处理时间太长了,看一下upstream_resp ...

  3. 【Linux】使用update-alternatives命令进行版本的切换

    引言 在Redhat中也有此功能,用于切换不同版本. 在Debian系统中,我们可能会同时安装有很多功能类似的程序和可选配置,可能会出现同一软件的多个版本并存的场景.比如像是一些编程语言工具,一些系统 ...

  4. C#中的多态性

    1.重载(overload) public void Sleep() { Console.WriteLine("Animal睡觉"); } public int Sleep(int ...

  5. Python学习笔记——迭代器(RandSeq和AnyIter)

    1.RandSeq #coding:utf-8 #!/usr/bin/env python 'randSeq.py -- 迭代' #从random模块里仅仅导入choice方法 from random ...

  6. Java排序算法——拓扑排序

    package graph; import java.util.LinkedList; import java.util.Queue; import thinkinjava.net.mindview. ...

  7. JVM大端判断

    JVM采用大端方式存多字节的数据,判断方法如下: public static void bytesToInt() throws IOException { /** * 将字节数组(byte[])转为整 ...

  8. 2012-2013 ACM-ICPC Northeastern European Regional Contest (NEERC 12)

    Problems     # Name     A Addictive Bubbles1 addictive.in / addictive.out 2 s, 256 MB    x438 B Blin ...

  9. 入门: 使用JNI 从C++代码中调用Java的静态方法

    开发环境: 操作系统: (uname -a output)  Linux ubuntu 3.8.0-19-generic #29-Ubuntu SMP Wed Apr 17 18:16:28 UTC ...

  10. WindowsPhone8.1RT建立空白应用挂起没反应的解决方案

    wp8.1下, 建立空白应用后遇到的问题:想要实现保存.提取数据都无法成功 在退出程序后无法进入到OnNavigatedFrom()中去. 网上说要手动的Invoke OnSuspending事件. ...