htmlcsssasspugtypography

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. enter image description here

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

  • There is something called shape-outside that can help to do this:

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