Text Balance in CSS is coming 🔥

#css #webdev #uidesign

When it comes to designing a website or application, balancing the text is an essential aspect. It not only improves readability but also adds to the overall aesthetic of the content. CSS provides various properties to achieve this balance, one of which is the text-wrap property with the value balance.

The text-wrap property is used to control how the text is wrapped within its container. When the value of the text-wrap property is set to balance, it ensures that the text is distributed evenly across multiple lines within the container. This results in a well-balanced block of text, without any uneven gaps or breaks.

Let's take a look at an example to better understand how the text-wrap: balance property works.

<h1 class="heading text-balance">This is a heading that will be balanced</h1>
<h1 class="heading">This is a heading that wont be balanced</h1>

Here, we have a heading. To apply the text-wrap: balance property, we need to add the following CSS code.

.text-balance {
  text-wrap: balance; <======
  background: #f4f4f4;
}

In the above CSS code, we have set the width of the heading to 300 pixels, and added the text-wrap: balance property to the text-balance class. This ensures that the headline is distributed evenly across multiple lines, without any uneven gaps or breaks.