CSS text-wrap balance

You,•Web Development
Back

For a quick summary of CSS Text-Wrap, watch the following video

Balancing Text Wrap in CSS

Ensuring your code is readable and aesthetically pleasing is a challenge that all developers face. One particular challenge is managing the way text wraps and distributes within a web page's design.

This post dives into CSS text-wrap: balance. This CSS property helps in creating a balanced layout by ensuring that text lines in a paragraph or block are as evenly distributed as possible. Whether you're an expert web developer or a beginner, understanding how to effectively use text-wrap: balance will significantly enhance your web design skills.

What is CSS Text-Wrap?

CSS text-wrap is a property that controls how text should break within a block container, particularly when the text is too long to fit within the available width of the container. The main purpose of text-wrap is to enhance readability and ensure a clean, organized layout.

Problem

When text wraps in a paragraph or block, the lines of text are often uneven distributed. This often results in an unbalanced layout that is visually unappealing and difficult to read.

Solution

The text-wrap: balance property in CSS automatically ensures that text lines are evenly distributed within a paragraph or block. Using this property will give your texts a more balanced and harmonious layout.

History of Text Wrapping in CSS

Before the introduction of text-wrap: balance in CSS, developers would use various alternative methods to handle text wrapping and distribution in web design. These methods often required more manual intervention and lack the simplicity and efficiency of text-wrap: balance.

Before text-wrap: balance, here are some methods that developers would use make their text lines evenly distributed:

1. Manual Text Breaks

Developers often have to manually insert line breaks or adjust the text to ensure even distribution. This method is time-consuming and not dynamically responsive to different screen sizes.

2. CSS Justify Property

The justify value of the text-align property was used to align text evenly along the left and right margins, stretching lines of text when necessary. However, this didn't always result in balanced line lengths, and often resulted in unpredicted behavior.

CSS Text Wrap Balance

Adding the text-wrap: balance property in CSS consistently ensures that there are an even number of text lines in each paragraph or block, resulting in a more balanced and harmonious layout that is easier to read and more aesthetically pleasing.

Photo

In the demonstration above, the first paragraph has text-wrap: balance applied to it, while the second paragraph does not. Notice how the first paragraph has evenly distributed text lines, while the second paragraph has unevenly distributed text lines.

How to Use CSS Text Wrap Balance

To use the text-wrap: balance property in CSS, simply add it to the CSS selector of the text or block you want to apply it to.

Let's take a look at an example:

Photo

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id = "container">
    <p>She sells sea-shells on the sea-shore. The shells she sells are sea-shells, I’m sure. For if she sells sea-shells on the sea-shore Then I’m sure she sells sea-shore shells.</p>
    </div>
    <br>
</body>
</html>
#container {
    width: 80%;
    padding: 20px;
    background-color: #fff;
}

On the image above, we can see that the text lines are unevenly distributed. The first line is longer than the second line, and the paragraph is uneven.

Now if we add the text-wrap: balance property to the CSS selector of the paragraph, we can see that the text lines are now evenly distributed, and the paragraph is balanced.

Photo

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id = "container">
    <p style="text-wrap: balance;">She sells sea-shells on the sea-shore. The shells she sells are sea-shells, I’m sure. For if she sells sea-shells on the sea-shore Then I’m sure she sells sea-shore shells.</p>
    </div>
    <br>
</body>
</html>
#container {
    width: 80%;
    padding: 20px;
    background-color: #fff;
    text-wrap: balance
}

A more evident comparison can be found here:

Photo

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id = "container">
    <h3>text-wrap: balance</h3>
    <p>She sells sea-shells on the sea-shore. The shells she sells are sea-shells, I’m sure. For if she sells sea-shells on the sea-shore Then I’m sure she sells sea-shore shells.</p>
    </div>
    <br>
    <div id = "container2">
    <h3>text-wrap: none</h3>
    <p>She sells sea-shells on the sea-shore. The shells she sells are sea-shells, I’m sure. For if she sells sea-shells on the sea-shore Then I’m sure she sells sea-shore shells.</p>
    </div>
</body>
</html>
#container {
    width: 80%;
    padding: 20px;
    background-color: #fff;
    text-wrap: balance;
}
 
#container2 {
    width: 80%;
    padding: 20px;
    background-color: #fff;
    text-wrap: none;
}

To reiterate, the text-wrap: balance property in CSS ensures that text lines are evenly distributed within a paragraph or block. This creates a more balanced layout that is easier to read and more aesthetically pleasing as shown above.

Conclusion

The introduction of text-wrap: balance offers a more standardized and efficient way to achieve evenly distributed text lines, simplifying the process and improving the aesthetic and readability of your content.

© Jiro Noor