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.

Possible help: http://stackoverflow.com/questions/226464/soft-hyphen-in-html-wbr-vs-shy — sgeddes, Jan 02 '13 at 20:44
I don't know of a sane way to to this either. An insane way would be to use ` ` for every space *except* the one you want to break at but that would mess up the entire text. If it's just the *hello* part, though, it just might work. — toniedzwiedz, Jan 02 '13 at 20:44
@SLaks, that might just be it. I'm thinking: `Hello, my name is foo.`. I wonder what browsers will do with that. Will test and report. thanks! — Jakob Jingleheimer, Jan 03 '13 at 00:33

Jukka K. Korpela · Answer 1 · 2013-01-04T08:11:14.700

16

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  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.

edited Jan 04 '13 at 08:11

answered Jan 02 '13 at 22:11

Jukka K. Korpela

195,524
37
270
390

1

For instance, I would do something like: `Hello,&dbr;my name is foo.` (where `&dbr;` is a discretionary line break, but as far as I know, `&dbr;` is not real). – Jakob Jingleheimer Jan 03 '13 at 00:30
@jacob, just don’t use made-up entities. What is the problem? – Jukka K. Korpela Jan 03 '13 at 00:51
6

I want to specify exactly where a line break should occure IF a line break is required. I would really prefer to use one character to specify where it should occure instead of using a bunch of characters to specify everywhere it shouldn't. – Jakob Jingleheimer Jan 03 '13 at 23:45
1

@jacob, I added an alternate answer that works along such lines, but I think it’s more logical and more robust to use spaces vs. no-break spaces (universally supported). But if the text contains hyphens, then the other approach might be better (because some browsers treat hyphens as allowing a line break after them by default). – Jukka K. Korpela Jan 04 '13 at 08:13
That sounded so promising; alas, it didn't work :( http://jsfiddle.net/jshado1/2agtK/ – Jakob Jingleheimer Jan 04 '13 at 18:51
1

D’oh, it seems that browsers have largely dropped support to `wbr` and zero width spaces inside `nobr` (Chrome still honors `wbr` inside `nobr`). I think this puts us into square one: divide the text into non-breakable segments. – Jukka K. Korpela Jan 04 '13 at 19:24
Ugh; how as html/css ignore this :( – Jakob Jingleheimer Jan 04 '13 at 21:56
The `wbr` does work inside a `nobr` tag, you just can't define width on the nobr tag, you have to define it on the wrapper tag: http://jsfiddle.net/sxc6h7jn/ – Skeets Aug 06 '19 at 02:27

score 12 · Answer 2 · edited May 23 '17 at 12:33

12

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?)

edited May 23 '17 at 12:33

Community

1
1

answered Jan 02 '13 at 20:42

chrisbulmer

1,237
8
15

9

Only for HTML5. Also, try to find resources *other than* w3schools :D – Jan 02 '13 at 20:44
7

The [`wbr`](https://developer.mozilla.org/en-US/docs/HTML/Element/wbr) is for breaking *within* a word. The OP wants to guide the browser to break between the words set. – Joseph Silber Jan 02 '13 at 20:44
1

@pst - IE has been supporting `wbr` since version 5.5 – Joseph Silber Jan 02 '13 at 20:44
3

@pst - Couldn't agree more about *staying the hell away* from w3schools. – Joseph Silber Jan 02 '13 at 20:45
Ah crap, didn't realise that. Have a look at http://stackoverflow.com/questions/2046530/whats-the-opposite-of-a-nbsp then – chrisbulmer Jan 02 '13 at 20:49
2

The reference to w3chools is crap, but using `wbr` is a practical solution. – Jukka K. Korpela Jan 02 '13 at 22:04

score 3 · Answer 3 · answered Mar 18 '20 at 13:13

Here's a technique that still works: break text into groups using spans of inline-block.

https://jsfiddle.net/mindplay/7aeyp3hs/

Note that I'm using an @media rule to turn off this effect on very small devices, where the text will just flow as text normally flows.

Joseph Silber · Answer 4 · 2013-01-02T20:56:42.857

2

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.

edited Jan 02 '13 at 20:56

answered Jan 02 '13 at 20:42

Joseph Silber

214,931
59
362
292

1

That is clever, however much of a mess it will make haha. thanks for the idea! – Jakob Jingleheimer Jan 03 '13 at 00:31

score 0 · Answer 5 · answered Feb 22 '23 at 00:42

Similar to @mindplay.dk's answer, I would recommend what I've done in the past with decent result: use @media breakpoints applied to br tags to control when those line breaks should render (as display: block) vs. not (display: none).

If you have breakpoints set up for mobile, tablet, and desktop, for example, you can do the following (Bootstrap-like code without needing to specify further CSS, as you can use their d-[sm|md|lg] variants):

Hello,<br class="d-none d-lg-block" />
my name is foo.

Discretionary line break in HTML?

5 Answers5

Linked