DEV Community

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

Posted on • Edited on

21 2 1

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 :)

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (3)

Collapse
 
marclipovsky profile image
Marc Lipovsky • Edited

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

Collapse
 
thomasbnt profile image
Thomas Bnt

🔥🔥🔥

Collapse
 
dhruvjoshi9 profile image
Dhruv Joshi

Awesome!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay