Discretionary line break in HTML?

Question

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 1

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 ​ or ​ (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.

Answer 2

You could use the <wbr> tag.

EDIT: As mentioned in the comments, you could use a zero-width space: ​ (See also: What's the opposite of a nbsp?)

Answer 3

I don't think there's any native way to do that, but here's a hack I've been using whenever I really need this sort of thing:

var str = "Hello,<br>My name is foo.";

str = str.replace(/ /g, '&nbsp;').replace(/<br>/g, ' ');

Basically, use a non-breaking space to separate the words you don't want to break at.

See it here in action: http://jsfiddle.net/5xmt6/ (resize the window to see how it reacts).

---

Note: this is very hacky, and introduces its own set of problems; namely: if the viewport becomes extremely narrow, the rest of the text won't wrap.