文本两端对齐 

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文本两端对齐</title>
        <style>
			.justify{
				width:100%;
				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*/
				.justify:after {
					content: ".";
					display: inline-block;
					width: 100%;
					overflow: hidden;
					height: 0;
				}
			}
		</style>
    </head>
    
    <body>
    	<div class="justify">在 Google 上 班 日 子 到 底 有 多 么 不 同</div>
    </body>
</html>

 上述的代码应该是兼容所有浏览器的，有个注意点特别强调：文字与文字之间必须加空格！

posted @ 2015-04-23 10:26  lpbottle  阅读(190)  评论(0)  编辑  收藏  举报