<body>
<div class="box">
<p>姓名</p>
<p>性与别</p>
<p>家庭住址</p>
<p>how are you</p>
<p>hello</p>
<p>1234</p>
<p>1 2 3 4</p>
</div>
</body>- text-align: justify;
- text-align-last: justify;
<style>
.box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 500px;
height: 500px;
border: 1px solid #000;
}
p {
width: 130px;
border: 1px solid #000;
text-align: justify;
text-align-last: justify;
/*兼容ie*/
text-justify: distribute-all-lines;
}
</style> 
- 设置 text-align: justify; 伪元素 after或者 before的样式，伪元素中可以添加width:100% 或padding-left:100%
<style>
.box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 500px;
height: 500px;
border: 1px solid #000;
}
p {
height: 30px;
width: 130px;
border: 1px solid #000;
text-align: justify;
}
p::after {
content: "";
display: inline-block;
/* width: 100%; */
padding-left: 100%;
}
</style>
