DEV Community

Cover image for Text Balance in CSS is coming 🔥
Aslam Shah
Aslam Shah

Posted on • Updated on

Text Balance in CSS is coming 🔥

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.

Text Balance

<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>
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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.

It's important to note that the text-wrap: balance property is not supported in all browsers. However, it is supported in Chrome Canary.

More information can be found here.

If you want to get updated on similar topics, don't forget to follow :)

Top comments (3)

marclipovsky profile image
Marc Lipovsky • Edited

Too many &nbsp; and break tags managing our content flow. This will be wonderful!

thomasbnt profile image
Thomas Bnt


dhruvjoshi9 profile image
Dhruv Joshi