<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>
