<section>
<div class="text-balanced">
 
  <h3>Not balanced</h3>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, accusantium rem!  </p>
  
 <h3>Balanced</h3> 
 <p class="balanced">Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, accusantium rem!
  </p> 
</div>


<div class="text-pretty">
   <h3>Not pretty</h3>
  <p>
   Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi voluptatem quo, quae recusandae accusamus beatae at. Atque fuga eum quasi praesentium iusto voluptas animi neque!    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi voluptatem quo, quae recusandae accusamus beatae at. Atque fuga eum quasi praesentium iusto voluptas animi neque!   
  </p>
  <h3>Pretty</h3>
 <p class="pretty">
   Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi voluptatem quo, quae recusandae accusamus beatae at. Atque fuga eum quasi praesentium iusto voluptas animi neque!    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi voluptatem quo, quae recusandae accusamus beatae at. Atque fuga eum quasi praesentium iusto voluptas animi neque!
  </p> 
</div>
</section>
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500&display=swap');

*{
  font-family: 'Work Sans', sans-serif;
  box-sizing: border-box;
  line-height:1.15;
}

h3{
  margin:0 0 .5rem;
  color:red;
}  

.text-balanced{
  display:block;
  width:75%;
    
    p{
    font-weight:bold;
    font-size:2.75rem;
    margin:0 0 1rem;
    
      &.balanced{
        text-wrap:balance;
      }
    }
}

.text-pretty{
  display:block;
  width:600px;
  margin-top:2rem;
  
    p{
    font-size:1.15rem;
    margin:0 0 1rem;
    
      &.pretty{
        text-wrap:pretty;
      }
    }  
  
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.