Responsive headline word-wraps

It always happens that a long headline wraps 1 word to a new line, but if you add a line break, then it wraps one word before the line break at certain screen sizes. Here is a solution I came up with to handle that problem.

The html:

<h3 class="heading-flex-wrap"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span> <span>integer feugiat faucibus laoreet.</span></h3>

The css:

.heading-flex-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 .55rem; \* add the width of one space between flex items *\
}

.heading-flex-wrap > * {
    text-wrap: balance; /* wrap words evenly */
    flex: 0 1 auto; /* don't grow items or they get extra space on wide screens */
    text-align: center;
}

Resize your browser to see how the heading behaves:


Normal Heading:

Lorem ipsum dolor sit amet, consectetur adipiscing elit integer feugiat faucibus laoreet.


Improved Heading:

Lorem ipsum dolor sit amet, consectetur adipiscing elit integer feugiat faucibus laoreet.