Discretionary line break in HTML?

Jakob Jingleheimer picture Jakob Jingleheimer · Jan 2, 2013 · Viewed 14.9k times · Source

I'm looking for a way to specify where a line should break if it cannot fit on its line in a way similar to ­ (soft/discretionary hyphen), but with a space. I tried googling it but didn't get many relevant hits (mostly for InDesign despite specifying "html"), and what I did get was a few people saying they didn't know of a way.

Ex.

Hello, my name
is foo.
vs.
Hello,
my name is foo.
but if space is available:
Hello, my name is foo.

For specificity, I do not mean white-space: normal/nowrap/pre/… and I don't want to force a break like with <br />.

I'm using AngularJS, so most everything is processed thru JavaScript, so if there's an easy/efficient/clever way to do it with that, I'd be open to it.

Answer

Jukka K. Korpela picture Jukka K. Korpela · Jan 2, 2013

To indicate where line break should not appear between words, use a NO-BREAK SPACE, or ' `, between words. Any normal space is breakable. So you can write e.g.

Hello,&nbsp;my&nbsp;name is&nbsp;foo. 

If you would rather indicate the allowed breaks (as per your comment below), you can wrap the text inside a nobr element (nonstandard, but works like a charm) or inside any element for which you set white-space: nowrap, thereby disallowing line breaks except when explicitly forced or allowed. You would then use the <wbr> tag (nonstandard, but...) or the character reference &#8203; or &#x200b; (for ice ZERO WIDTH SPACE) after a space to allow a line break, e.g.

<nobr>Hello, <wbr>my name <wbr>is foo.</nobr>

The choice between <wbr> and ZERO WIDTH SPACE is a tricky issue, mainly due to IE oddities.