浏览器参照基准: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. 使用spring注解@Controller @Service @Repository简化配置

    前言:在web项目中引入spring框架中的配置文件,我们给每一个java bean进行相关配置可以非常安全,便捷的管理我们的bean.那么,问题来了,如果一个项目中所涉及到的java bean十分庞 ...

  2. Java学习笔记12

    循环 打印一个字符串(例如: "Welcome to Java!") 100次,就需要吧下面的输出语句重复写100遍,这是相当繁琐的: System.out.println(&qu ...

  3. ubuntu sudo update与upgrade的作用及区别

    ubuntu sudo update与upgrade的作用及区别 入门linux的同志,刚开始最迫切想知道的,大概一个是中文输入法,另一个就是怎么安装软件.本文主要讲一下LINUX安装软件方面的特点. ...

  4. grunt安装和使用教程

    grunt的安装 npm intall -g grunt-cli 新建文件夹grunt,在本地文件中添加package.json和Gruntfile.js文件,其中package.json文件的配置如 ...

  5. python 面向对象(类)

    面向对象,即是将具备某种共性的事物抽象成一个类(模板),然后再根据类来创建实例对象进行具体的使用. 概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写, ...

  6. 解决COM组件80070005错误

    前段时间在维护公司以前的项目时遇到一个问题,客户需要添加一个word文档合并功能,按理说这功能比较好实现,只要调用Office自带的COM组件就搞定了,但实际上并非如此,在客户端部署上以后运行报错,提 ...

  7. PHP利用P3P实现跨域

    本文转自:点这里 有别于JS跨域.IFRAME跨域等的常用处理办法,还可以利用P3P来实现跨域. P3P是什么 P3P(Platform for Privacy Preferences)是W3C公布的 ...

  8. 安装yii2时出错 Invalid Parameter – yii\base\InvalidParamException

    最近composer安装yii2的时候页面报了这个错,应该是bower的前端资源位置改变的缘故! Invalid Parameter – yii\base\InvalidParamException ...

  9. toolkit --------chart属性

    Data Visualization类组件以直观的图表方式显示数据的分布,能够让我们更好地分析各数据的内在联系.本文主要向大家介绍该类组件的基本特性以及使用实例. 一.基本特性介绍 1.chart组件 ...

  10. iphone如何导出微信聊天记录到电脑?

    有个小美眉买了个iphone,但发现自己就是一小白,很多功能都不会用,微信倒是用得挺上手的,可以晚上聊到三四点,流量直接飙升500MB.最近她说手机太卡了,问ytkah帮她整一下.拿起她的IPhone ...