第一种实现方式：
css设置如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>两端对齐示例</title>
<style>
.name {
width: 100px;
text-align: justify;
}
.name:after {
content: '';
display: inline-block;
width: 100%; /* 伪元素占满整行，从而触发两端对齐 */
}
</style>
</head>
<body>
<div class="name">张三</div>
<div class="name">张三丰</div>
</body>
</html>效果如下：
第二种实现方式：
css设置如下 :
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>两端对齐示例</title>
<style>
.name {
width: 100px;
text-align: justify;
text-align-last: justify;
}
</style>
</head>
<body>
<div class="name">张三</div>
<div class="name">张三丰</div>
</body>
</html>效果如下：
