CODEWITHSUNDEEP
htmlcontrol-characters
Jakob Jingleheimer
Jakob Jingleheimer

Reputation: 31580

Discretionary line break in HTML?

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.

Upvotes: 26

Views: 19819

Answers (5)

Ezekiel Victor
Ezekiel Victor

Reputation: 3876

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.

Upvotes: 0

mindplay.dk
mindplay.dk

Reputation: 7360

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

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

example

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.

Upvotes: 3

chrisbulmer
chrisbulmer

Reputation: 1245

You could use the <wbr> tag.

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

Upvotes: 12

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

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.

Upvotes: 18

Joseph Silber
Joseph Silber

Reputation: 219938

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.

Upvotes: 2

Related Questions