Discretionary line break in HTML?

control-characters, html

Solution

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, my name is 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.

Problem

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 `&shy;` (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.

Original source

Related problems