image.png
如何实现图中两行文字对齐呢？？？
使用text-align:justify 让多行文字两端不对齐的对齐，但是单行字无效
<p>
文字文字文字文字文字文字文hi字文字hi文字
hi文字hi文字j文字文字ssss文字文字文字文字文字kkkk文字文字文字
文字文字文字文字文字文字文ssss字文字文字文字文字文字文字文字
</p>
image.png
p标签加上style="text-align:justify"后，
image.png
图中是两个单行文字，那该如何对齐呢：
使用伪元素，添一行就可以多行对齐啦
image.png
/现在太高了，所以要去掉这个蓝线，所以要先定行高/
image.png
定完行高，蓝线就出来了，再使用overflow：hidden 消灭掉
image.png
最终效果：
image.png
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>多行文字居中</title>
<style>
span{
display:inline-block;
border:1px solid green;
width:5em;
text-align:justify;
/*现在太高了，所以要去掉这个蓝线，所以要先定行高*/
line-height:20px;
height:20px;
overflow:hidden;
}
span::after{
content:'';
display:inline-block;
border:1px solid blue;
width:100%;
}
</style>
</head>
<body>
<div>
<span>姓名</span><br>
<span>联系方式</span>
</div>
</body>
</html>
