HTML no line break at hyphens

Question

So I have the text e-commerce and I don't want the line to wrap at the dash.
How would I restrict wrapping for that text line?

score 94 · Answer 1 · answered Aug 28 '11 at 04:19

94

You could use CSS: white-space: nowrap;.

Example: Wrap the text in a span with that CSS declaration.

<span style="white-space: nowrap;">e-commerce</span>

answered Aug 28 '11 at 04:19

Paul Sham

3,185
2
24
31

5

only then it will not wrap at all which is not the intended result. – Madara's Ghost Aug 28 '11 at 04:20
… uuhh… what? `blah blah e-commerce` will work just fine =\ – David Wolever Aug 28 '11 at 04:21
I am adding an example, it's not as clean as the `‑` method though. – Paul Sham Aug 28 '11 at 04:22
11

Due to the title of the question, everyone is coming to this page from google searching for this answer, not caring about hyphens. – Nick Manning Jul 31 '14 at 20:48
I took the liberty of fixing that. – Edward Falk Nov 11 '16 at 19:06

score 62 · Accepted Answer · edited Oct 26 '14 at 13:29

62

Use the non-breaking hyphen: ‑

edited Oct 26 '14 at 13:29

Benny Code

51,456
28
233
198

answered Aug 28 '11 at 04:17

Michael Lorton

43,060
26
103
144

1

+1. It works. Didn't know that. Here's a fiddle to show: http://jsfiddle.net/jasongennaro/NR5Ch/ – Jason Gennaro Aug 28 '11 at 04:21
@Rikudo Sennin -- my first SO drag-race victory (I've been an also-ran dozens of times)! And OP, I just Googled it myself. If you didn't have success there, you may want to read [this](http://owlet.letu.edu/grammarlinks/punctuation/punct4d.html). – Michael Lorton Aug 28 '11 at 04:25
The downside of that is that searching the page for "e-commerce" will not find the string. – Alexei Danchenkov Apr 13 '18 at 04:53
@AlexeiDanchenkov - It depends on the sophistication of your browser, yes. – Michael Lorton Apr 13 '18 at 17:56
@Malvolio well, Chrome 65 is not sophisticated enough to see hyphen and ‑ or ߛ as the same symbol. – Alexei Danchenkov Apr 14 '18 at 11:34
Beware that not all fonts have that character, so it might be rendered in a fall-back font instead. In some cases, this might be visually unpleasant. – Discostu36 Jun 29 '23 at 14:19

score 20 · Answer 3 · answered Aug 28 '11 at 04:19

20

Wrap it in the <nobr>…</nobr> tag, or if you care out the validity of your HTML, set the white-space: nowrap; style.

answered Aug 28 '11 at 04:19

David Wolever

148,955
89
346
502

4

I think `` tags are deprecated. Edit: I was not the downvoter though. – Paul Sham Aug 28 '11 at 04:21
*If* you care about validity?!? I wasn't the downvoter, but if I were, I wouldn't reverse it on those grounds. – Michael Lorton Aug 28 '11 at 04:27
3

nobr is deprecated, but it shouldn't be. That's a plain screw-up by the World Wide Web Consortium. – Dave Burton Apr 28 '14 at 10:12
1

Hadn't heard of it, but `` works everywhere I tried - and better than the other options... It's like, we - never got to know each other... and now it's too late? Say it isn't so! – sheriffderek Jun 26 '15 at 01:24

Robert Siemer · Answer 4 · 2015-05-11T11:29:02.187

There is this non-breaking hyphen (copy and paste it):‑ or use ‑ or ‑

Note that this is the only unicode “character” which unifies the following characteristics:

is pre-composed (you can make anything non-breaking by composition)
is non-breaking
is a hyphen or dash or similar

The usage of the word joiner represented by ⁠ or ⁠ allows for other hyphens. Results:

e‐⁠commerce (hyphen followed by word joiner)
e‑⁠commerce (ASCII hyphen/minus followed by word joiner)
...and the precomposed one for reference:
e‑commerce (non-breaking hyphen)

http://jsfiddle.net/NR5Ch/58/ (this fiddle shows the effect of the word joiner)

HTML no line break at hyphens

4 Answers4