HTML Line Break Opportunity <wbr> Element

I like to think of <wbr> as a soft line break. Kind of like <br>, but optional. Stick a <wbr> in a regular 'ol paragraph and probably the effect won't even be noticeable. But put it in a long string that doesn't like to wrap for one reason or another but really could wrap and the purpose of the line break opportunity becomes clear. It's like, "hey, web browser, if you wanna make a line break, you should totally make it right here, this is basically the perfect spot to text wrap". This won't necessarily be where the line break happens, especially if this is just a normal paragraph. In that case the web browser will probably be like, "hey, uh, yeah, I've already got a good spot to word wrap, but thanks anyway."

As a quick example, let's say I have a span with some text in it and also the span is styled with CSS to be white-space:nowrap

<span>The text in this span is set <wbr>to white-space:no-wrap using CSS.</span>

Resize the window to make the above span line wrap. Because the span is set to white-space:no-wrap, the text in the span doesn't wrap, except at the <wbr>, which saying something like, "hey, if need be, let's wrap the text right here and just forget about all that no-wrap jazz in this one particular instance."

<wbr> and White Space: Notice how I put <wbr> after the space and not before. I've noticed that if I put the break before the space than when the line wraps it will sometimes look like it's indented by one space. So when there's a space, I like to place my optional line breaks after the space. If it's just a long string without any whitespace, this doesn't matter.