CODEWITHSUNDEEP
html
Kirk Strobeck
Kirk Strobeck

Reputation: 18669

HTML no line break at hyphens

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?

Upvotes: 42

Views: 100486

Answers (4)

Robert Siemer
Robert Siemer

Reputation: 34771

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)

Upvotes: 8

Michael Lorton
Michael Lorton

Reputation: 44436

Use the non-breaking hyphen: ‑

Upvotes: 63

Paul Sham
Paul Sham

Reputation: 3205

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>

Upvotes: 94

David Wolever
David Wolever

Reputation: 154682

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

Upvotes: 20

Related Questions