<!DOCTYPE HTML>
<html>
<head>
<title>文本两端对齐 by 司徒正美</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.box1{
background:red;
width:20%;
}
.scatter {
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*/
.scatter:after{
content:".";
display: inline-block;
width:100%;
overflow:hidden;
height:0;
}
}
</style>
</head>
<body>
<div class="box1">
<div class="scatter">姓 名</div>
<div class="scatter">姓 名 姓 名</div>
<div class="scatter">姓 名 名</div>
<div class="scatter">所 在 地</div>
<div class="scatter">工 作 单 位</div>
</div>
</body>
</html>