css 文字两端对齐

lryh_2024-06-23 22:30

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