CSS文本结束缩进

Question

我正在尝试用CSS实现红色突出显示的效果。第一行是最长的，第二行是较短的等等。

https://codepen.io/make96/pen/QmMJyx

我正在使用Jade和SASS，下面是我的代码：

#section
 min-height: auto
 width: 100vw
 background: black
.content
  margin: 0 auto
  padding: 7vh 0
  width: 52vw
 //border: 1px solid white
  position: relative
  h1,h2
    color: #c9d0d4
    font-family: 'Helvetica Neue', sans-serif
    font-size: 1.2em
    font-weight: 100
    letter-spacing: 1px
    padding: 0
    margin-bottom: 1.2vh
    width: 50vw
  h2
    font-size: 1em
    width: 32vw
    margin-bottom: 3vh
  p
    color: #bbc3c8
    font-family: 'Verdana', sans-serif
    font-size: 0.8em
    line-height: 1.6vh
    margin: 0 0 6px 0
  width: 40vw

玉

#section
  .content
    h1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
    h2 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
    p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Answer 1

有一种叫做shape-outside的东西可以帮助做到这一点但当然not well supported：

.shape {
  shape-outside: polygon(0 300px, 300px 0, 300px 300px);
  width: 300px;
  height: 300px;
  float: right;
}

p {
  text-align: justify;
}

<div class="shape"></div>
<p>lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem
  ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume</p>

Answer 2

使用shape-outside ..

shape-outside CSS属性定义了内联内容应该围绕的形状。默认情况下，内联内容会围绕其边距框。

MDN

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

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

.right {
  width: 40%;
  height: 100vh;
  background-color: lightgray;
  /* for visibility */
  opacity: .25;
}

.right {
  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

p {
  text-align: center;
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside -->

<div class="main">
  <div class="right"></div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt eos obcaecati tenetur, distinctio quia sit dolore atque non corrupti at maiores quaerat impedit enim quidem optio perspiciatis aspernatur animi voluptatum illo veritatis quod id minima facere
    exercitationem! Quisquam quasi nam error molestias, distinctio necessitatibus tempore nihil obcaecati incidunt, aliquid harum. Nihil hic voluptatibus molestias veniam alias officiis ipsam, rerum at rem facere et temporibus, ad fugiat labore sit, eum
    animi exercitationem. Nisi, cumque. Recusandae quos, ipsam corrupti itaque modi perspiciatis. Aperiam doloremque dolor dolorem facere quia laudantium repellendus consequatur. Rerum ullam ea autem id maiores suscipit animi corporis itaque debitis,
    molestias, eos incidunt soluta ducimus blanditiis, dolor dicta sunt veritatis. Ex ipsam praesentium nemo possimus? Aperiam labore in possimus minima, nemo incidunt voluptatem deserunt laudantium enim architecto fugiat illo maiores sequi odio similique
    numquam, ipsa corrupti quas rerum reiciendis, ducimus aut accusamus. Facilis libero eligendi blanditiis velit, aspernatur ipsam. Assumenda quos deserunt ea. Dolore quisquam sapiente rerum ad numquam atque enim officiis quae? Provident beatae repellat
    eligendi praesentium id dolorum consequatur sapiente modi facere totam, vero atque accusantium molestiae delectus facilis quisquam ipsam, maiores eaque ex, ea commodi accusamus necessitatibus. Totam, alias nulla. Eum commodi vitae, animi deserunt
    molestias neque?
  </p>
</div>