如何使用css实现文本两端对齐

这篇文章主要为大家展示了“如何使用css实现文本两端对齐”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用css实现文本两端对齐”这篇文章吧。

创新互联公司2013年成立,是专业互联网技术服务公司,拥有项目成都网站设计、成都网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元神池做网站,已为上家服务,为神池各地企业和个人服务,联系电话:13518219792

在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名,手机号码,出生地。这样我们就要用到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>

方案:

.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;/*chrome20+*/

}

@mediascreenand(-webkit-min-device-pixel-ratio:0){/*chrome*/

.test1:after{

content:".";

display:inline-block;

width:100%;

overflow:hidden;

height:0;

}

}

运行代码:

文本两端对齐

姓名

姓名姓名

姓名名

所在地

工作单位

以上是“如何使用css实现文本两端对齐”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


分享文章:如何使用css实现文本两端对齐
网页URL:http://hbruida.cn/article/pcipgc.html

其他资讯