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.
It's important to note that the
text-wrap: balanceproperty 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)
Too many
and break tags managing our content flow. This will be wonderful!π₯π₯π₯
Awesome!