css 如何在两端对齐的文本中间添加间距?

9jyewag0  于 2022-12-27  发布在  其他
关注(0)|答案(1)|浏览(145)

如何在一段两端对齐的文本中间放置一个间隙(如图所示)?文本不会自动换行到列中的下一行,而是从差距的左侧到右侧继续。文本在整个段落中以及间隙的前后两端对齐。

示例html:

<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived
</div>
xdyibdwo

xdyibdwo1#

您需要了解显示器:Flex;和对齐内容

<div class="contianer">
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    

    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</div>
    <style type="text/css">
        .contianer{
            display: flex ;
            height: 300px;
            width: 100%;
            border: 1px solid red;
            justify-content: space-evenly;
            align-items: center;
        }

        .contianer > div{
            width: 40%;
            height: 50%;
            border: 1px solid red;

        }
    </style>

相关问题