css 文本两端对齐终极解决方案--一丝冰凉

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

text-align直接设为justify就行了，text-justify的情况就复杂了，可能有人对它还不熟悉。IE的取值如下：

auto :允许浏览器用户代理确定使用的两端对齐法则
inter-word :通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效
newspaper : 通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式
distribute :处理空格很像newspaper，适用于东亚文档。尤其是泰国
distribute-all-lines :两端对齐行的方式与distribute相同，也同样不包含两段对齐段落的最后一行。适用于表意字文档
inter-ideograph : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格

但它最早是作为IE的私有实现，像text-overflow， overflow-x等，在FF很晚才实现，换言之有严格的兼容性问题。并且FF，chrome需要手动在汉字间插入空白或软换行标签才生效，在chrome遇到的阻力就更大了。p>

这两天一直在QQ群与朋友们在聊这问题，最后由一丝给出究极方案：

.test1 {

text-align:justify;

text-justify:distribute-all-lines;/*ie6-8*/

text-align-last:justify;/* ie9*/

-moz-text-align-last:justify;/*ff*/

-webkit-text-align-last:justify;/*chrome 20+*/

}

@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/

.test1:after{

content:".";

display: inline-block;

width:100%;

overflow:hidden;

height:0;

}

<!DOCTYPE HTML>
<html><head><title>文本两端对齐 by 司徒正美</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style>.box1{background:red;width:30%;}.test1 {text-align:justify;text-justify:distribute-all-lines;/*ie6-8*/text-align-last:justify;/* ie9*/-moz-text-align-last:justify;/*ff*/-webkit-text-align-last:justify;/*chrome 20+*/}@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/.test1:after{content:".";display: inline-block;width:100%;overflow:hidden;height:0;}}</style></head><body><div class="box1"><div class="test1">姓 名</div><div class="test1">姓 名 姓 名</div><div class="test1">姓 名 名</div><div class="test1">所 在 地</div><div class="test1">工 作 单 位</div></div></body>
</html>

转载自http://www.cnblogs.com/rubylouvre/archive/2012/11/28/2792504.html

转载于:https://www.cnblogs.com/ginowang42/archive/2013/05/31/3111604.html

css 文本两端对齐终极解决方案--一丝冰凉相关推荐

css文本两端对齐text-algin:justify兼容IE写法
p{text-align:justify; //chrome和firfox都能生效,ie下不生效,包括最高版本text-justify:inter-ideograph; //兼容IE(只有ie下才能用 ...
css 文本两端对齐
display: inline-block;text-align: justify;vertical-align: top;text-align-last: justify; 效果图如下
css之文本两端对齐的两种解决方法
css之文本两端对齐的两种解决方法参考文章: (1)css之文本两端对齐的两种解决方法 (2)https://www.cnblogs.com/wl0804/p/11265225.html 备忘一下.
css+js解决文本两端对齐以及分散对齐
一个很简单的设计排版样式,A图表示居左对其,但实际上我们想要的可能是B所示的对齐方式. 这就是传说中的两端对齐还有一种更确切的说法是两端分散对齐. 最开始的时候 ,我试图使用CSS来解决这个小问题, ...
css实现两端对齐的3种方法
说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...
css+分散,【原】css实现两端对齐的3种方法
说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...
文本两端对齐及将表单打印在A4上
/**工作中遇到一个问题就是单位看到一些有关公司得相关得事项,想要讲内容打印出来,所以前端设计了一个样式, 但是还是有很多不足的地方,暂时没有想到更好的方法,如: 一些字体要求是特殊字体,没有办法为 ...
HTML如何让文本两端对齐
Question 之前看一个外文网站,貌似都不是两端对齐,我想把他转换为PDF文件下载下来.不是两端对齐看起来太难受了.找了个方法. Solution <p style="text-a ...
CSS 文本一行两端对齐无效解决方案
今天写登录界面的时候需要左边的名称两端对齐,但是使用 text-align: justify;属性无效这里在网上找到一个解决方案就是使用text-align: justify;加上display: ...
css单行文本两端对齐
p{text-align:justify;text-align-last:justify; } 上面两行代码大家都很熟悉,对于多行文本来说,基本可以兼容所有的游览器,实现两端对齐.在多行文本中,该样式 ...

css 文本两端对齐终极解决方案--一丝冰凉

css 文本两端对齐终极解决方案--一丝冰凉相关推荐

最新文章

热门文章