如何在侧面CSS中分隔段落

时间:2018-08-17 00:59:48

标签: css css3

如果屏幕较大,并且段落分开,我会更改文本:

示例:

正常:

Lorem ipsum dolor坐着,安全奉献精英。 Morbi eu nulla lectus。 Proin imperdiet eros odio,eget interdum elit porttitor imperdiet Nulla ac congue ante,sed consectetur lorem。

Ut dui velit,拉西尼亚quis前庭,ullamcorper quis dolor。 dignissim enim的Etiam等。悬念得到luctus nisl。 Maecenas iaculis quam坐在amet的vulputate菱形。

分隔:

enter image description here

我想要什么:

我需要计算所有段落,并在左边或右边分开。

如果我有4个段落,则序列:

1 ------ 3

2 ------ 4

1 个答案:

答案 0 :(得分:1)

CSS列

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

div {
  column-count: 2;
  column-gap: 40px;
  width: 80%;
  margin: auto;
}

p {
  break-inside: avoid;
  margin-bottom: 1em;
  text-align: justify;
}
<div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus repellendus excepturi quidem molestias officiis quibusdam maiores porro voluptates.</p>

  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione dolorum est culpa. Assumenda dignissimos, commodi, quas esse facilis aspernatur cupiditate excepturi aperiam eos porro fuga necessitatibus labore atque dolor laudantium nobis eveniet
    aut!</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga est in ex quas veritatis aliquam! Nulla recusandae culpa laboriosam itaque. Eum nisi quidem aspernatur dignissimos!</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, nesciunt temporibus magni excepturi fuga expedita voluptatem amet praesentium..</p>
</div>

相关问题