CSS Textual content balancing with text-wrap:steadiness

Have you ever ever wished there’s a native means in CSS to make two strains headlines constant within the variety of phrases per line? As a designer, I spot that so much when coping with various content material lengths whereas designing a web site or a UI.

Such a factor could make the UI you’re engaged on feels unbalanced, or lacking one thing. Here’s what I imply:

The highlighted phrase is a single phrase that lives on its line. From a visible perspective, this appears odd. It’s breaking the visible

Whereas I design in a instrument like Figma, I deliberately transfer that final phrase to the earlier line, simply to keep away from that inconsistency.

That appears higher, proper?

In code, if balancing is necessary, we are able to do this manually by utilizing a <br>, or dividing the opposite a part of the content material with a <span>. There are methods to present hints to the browser on when to interrupt a phrase by utilizing the <wbr> ingredient, however not a sentence.

There’s a React element known as React Wrap Balancer that make the textual content balanced dynamically on resize.

Textual content balancing in CSS

Fortunately, we now have experimental assist for text-wrap: steadiness in Chrome Canary. The browser will robotically calculate the variety of phrases and divide them equally between two strains.

All we’d like is to use the text-wrap: property.

.c-hero__title {
  max-width: 36rem;
  text-wrap: steadiness;
}

With that, the title content material will probably be balanced and we received’t have a single phrase in its line.

Demo

Let’s discover this in additional element.

Textual content balancing with max-width set on the ingredient

It’s necessary to understand that utilizing textual content balancing received’t have an effect on the width of the ingredient.

Think about the next determine.

The utmost width of the headline is 630px. When text-wrap: steadiness is there, it’s going to align the variety of phrases per line, and the max-width received’t be affected.

The identical factor additionally occurs when the container is small, like a card title. It is going to simply have an effect on the phrases inside their container.

Use circumstances & examples

Let’s discover the place text-wrap: steadiness might be helpful.

Web page title

A web page title is the very first thing which may catch the person’s eye. Right here is an instance with out balancing:

Balanced textual content:

Card title

This can be a widespread sample the place you may spot an inventory of articles with totally different titles.

With textual content balancing in CSS, that may be solved simply:

.card__title {
  text-wrap: steadiness;
}

Tooltip

We regularly use a tooltip to indicate necessary info to the person. It could be a number of phrases or a number of strains.

Here’s a tooltip the place a single phrase lives on its line.

The fastened model with text-wrap: steadiness.

.tooltip p {
  text-wrap: steadiness;
}

Modal

Oftentimes, we’d have a modal title that’s spanning into a number of strains. It may be visually annoying to see a single phrase on its line.

With textual content balancing, it’s going to look higher:

.modal__title {
  text-wrap: steadiness;
}

FAQ

One other instance the place I see a great potential for text-wrap: steadiness is in a FAQ checklist.

After textual content balancing:

Textual content balancing received’t have an effect on the ingredient’s width

I’m undecided about utilizing text-wrap: steadiness when it might’t management the ingredient width. In sure designs, it might depart an enormous area that makes the design even worse in my view.

Think about the next determine:

.blockquote {
  max-width: 20rem;
}

.blockquote p {
  text-wrap: steadiness;
}

Discover how the width of the textual content within the pink define. When textual content balancing is utilized, the width will keep as is and solely the textual content will probably be reordered.

Here’s a comparable drawback from the tooltip instance that I confirmed:

I can inform you from previous experiences that this received’t please designers. This can be a massive white area that makes the design really feel unbalanced.

What if, for instance, we are able to activate an choice to let text-wrap: steadiness have an effect on the ingredient’s width?

.ingredient {
  text-wrap: steadiness;
  width: fit-content;
}

The key phrase fit-content will pressure the ingredient width to match the brand new balanced textual content, however that is simply an thought. I’m certain that this concept could be changed with one thing higher, however you bought it.

Efficiency limits

At the moment, the function is restricted to 4 strains solely. Which means, it might primarily be used for headlines or paragraphs with a number of strains.

Additional sources: