css文本两端对齐的实现代码
发布时间:2018-11-07 16:59:03 作者:佚名 我要评论
这篇文章主要介绍了css文本两端对齐的实现代码,需要的朋友可以参考下
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地。这样我们就要用到 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>
方案:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .test 1 { 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*/ .test 1: after{ content : "." ; display : inline- block ; width : 100% ; overflow : hidden ; height : 0 ; } } |
运行代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE HTML> <html> <head> <title>文本两端对齐 </title> <meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" > <style> .box 1 { background : red ; width : 30% ; } .test 1 { 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*/ .test 1: 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> |
总结
以上所述是小编给大家介绍的css文本两端对齐的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
css两端对齐之div+css布局实现2端对齐的4种方法总结
div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章主要介绍了css两端对齐之div+css布局实现2端对齐的4种方法总结的相关资料,小编觉得挺不错的,现在分享给2018-09-29- 在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地,一般情况下我们都会使用text-align、text-justify样式来应付,下面有个不错的示例大家可2013-09-27
最新评论