HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.justify {
border: 1px solid blue;
200px;
height: 18px;
font-size: 15px;
color: red;
text-align: justify;
}
.justify span {
display: inline-block;
padding-left: 100%;
}
</style>
</head>
<body>
<div class="justify">hello, text justify.</div>
<br/>
<div class="justify"> hello, text justify.<span></span></div>
<br/>
<div class="justify">中 文 两 端 对 齐</div>
<br/>
<div class="justify">中 文 两 端 对 齐<span></span></div>
</body>
</html>
result:
总结:从效果图可以看到,除了要在块级元素加text-align:justify样式外,还需要在里面加一个空的span元素,并应用样式。另外,对于中文还必须用空格隔开汉字,否则也没有两端对齐的效果。英文每个单词都有空格隔开,所以没问题。