好用兼容的文字对齐方式
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .test { padding:20px; text-align:justify; text-justify:distribute-all-lines;/*ie6-8*/ /*text-justify: distribute;*/ text-align-last:justify;/* ie9*/ /*前三个同时存在才能在ie8下正常展示*/ -moz-text-align-last:justify;/*ff*/ -webkit-text-align-last:justify;/*chrome 20+*/ } .test:after{ content:"."; display: inline-block; width:100%; overflow:hidden; height:0; } </style> </head> <body> <div style="background-color: pink;width: 120px"> <div class="test">姓名</div> <div class="test">性别</div> <div class="test">手机号</div> <div class="test">邮箱地址</div> <div class="test">所在地</div> <div class="test">工作单位</div> <div class="test">家庭住址</div> </div> </body> </html>
兼容IE8+及以下的文字对齐方式。所有的知识均来自三高娘子 感谢原文作者 ;-)
这里只是做一个记录 以供不时之需。
