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: