Balance those beautiful words

Have you ever received a design from your UX/UI-designer where every word ends and aligns perfectly with the elements around it? But when you put it into code, it looks nothing like the original design?

As developers, we often lack information about the final size, font size, or language of a headline. All the necessary variables for effectively and aesthetically treating text wrapping are in the browser. However, now we have a solution to help balance text.

h1,
h2,
h3,
h4,
h5,
blockquote {
  text-wrap: balance;
}

‘text-wrap’ is used to control how text wraps within its container, and ‘balance’ enables automatic balancing of text lines across multiple columns, resulting in a visually appealing and balanced layout. It’s a small detail with a nice visual impact.

I absolutely love this feature!