CSS text ending indentation

问题

I'm trying to achieve the red highlighted effect with CSS. The first row to be the longest, the second shorter and so on.

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

I'm using Jade and SASS and below is my code:

#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

Jade

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

回答1:

There is something called shape-outside that can help to do this but of course 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>

回答2:

Use shape-outside..

The shape-outside CSS property defines a shape around which inline content should wrap. By default, inline content wraps around its margin box.

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>

来源：https://stackoverflow.com/questions/49469600/css-text-ending-indentation