Skip to content
👉All tips here

CSS text-wrap: The Property That Boosts Your Text Control

CSS text-wrap: The Property That Boosts Your Text Control

Are you always looking for ways to improve your project’s web content’s readability and visual appeal? The new values for the CSS text-wrap for better readability properties are part of CSS Text Level 4 and give us fine-grained control over how text wraps within elements. Allowing you to enhance the overall design. Let’s dive into this feature and explore how it can improve your layouts.

So, what is text-wrap?

The text-wrap property allows you to specify how text should wrap when it reaches the end of its container. It provides options to balance text, prevent orphans, and even wrap text in the middle of words. In short, the text-wrap CSS property controls how text inside an element is wrapped.

The CSS Text-Wrap values for better readability:

  1. balance: Attempts to balance the number of lines in a paragraph. It only works for six wrapped lines and under.
  2. pretty: Similar to balance, but with additional rules to prevent orphans. It ensures paragraphs don’t end with a single word and adjusts hyphenation when consecutive hyphenated lines occur. It also tweaks previous lines for better justification. text-wrap: pretty focuses on improving line wrapping, especially for orphans, with potential for future enhancements.
  3. nowrap: Prevents text from wrapping to a new line.

Please note that balance it will only apply to less than six lines. While pretty is the opposite of balance and can be used on entire blocks of text you’re only really going to see a difference in the last four lines of text.

Demo time:

See the Pen The CSS text-wrap property in action by Ivo Culic (@ifkas) on CodePen.

According to me, balance is better for headlines and subheadings, and pretty for paragraphs.

Tip

For optimal readability, combine text-wrap: balance with max-width:

.readable-paragraph {
  max-width: 80%;
  text-wrap: balance;
}

Another tip

If you are a fan of Tailwind CSS, just like me, then you got this baked, check this out: https://tailwindcss.com/docs/text-wrap

Browser support

While text-wrap is a relatively new property, it’s supported in Chromium browsers and gaining support in modern browsers. Always check compatibility before implementing it in production.

You can always check and refer here: https://caniuse.com/?search=text-wrap

Learn more