No line-break after a hyphen
HtmlCssCharacter EncodingLine BreaksHyphenationHtml Problem Overview
I'm looking to prevent a line break after a hyphen -
on a case-by-case basis that is compatible with all browsers.
Example:
I have this text: 3-3/8"
which in HTML is this: 3-3/8”
The problem is that near the end of a line, because of the hyphen, it breaks and wraps to the next line instead of treating it like a full word...
3-
3/8"
I've tried inserting the "zero width no break character", 
with no luck...
3-3/8”
I'm seeing this in Safari and thinking it will be the same in all browsers.
The following is my doctype
and character encoding...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
Is there any way I can prevent these from line-breaking after the hyphen? I do not need any solution that applies to the whole page... just something I can insert as needed, like a "zero width no break character", except one that works.
Here is a Demo. Simply make the frame narrower until the line breaks at the hyphen.
Html Solutions
Solution 1 - Html
Try using the non-breaking hyphen ‑
. I've replaced the dash with that character in your jsfiddle, shrunk the frame down as small as it can go, and the line doesn't split there any more.
Solution 2 - Html
You could also wrap the relevant text with
<span style="white-space: nowrap;"></span>
Solution 3 - Html
IE8/9 render the non-breaking hyphen mentioned in CanSpice's answer longer than a typical hyphen. It is the length of an en-dash instead of a typical hyphen. This display difference was a deal breaker for me.
As I could not use the CSS answer specified by Deb I instead opted to use no break tags.
<nobr>e-mail</nobr>
In addition I found a specific scenario that caused IE8/9 to break on a hyphen.
- A string contains words separated by non-breaking spaces -
- Width is limited
- Contains a dash
IE renders it like this.
The following code reproduces the problem pictured above. I had to use a meta tag to force rendering to IE9 as IE10 has fixed the issue. No fiddle because it does not support meta tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta charset="utf-8"/>
<style>
body { padding: 20px; }
div { width: 300px; border: 1px solid gray; }
</style>
</head>
<body>
<div>
<p>If there is a - and words are separated by the whitespace code &nbsp; then IE will wrap on the dash.</p>
</div>
</body>
</html>
Solution 4 - Html
You can also do it "the joiner way" by inserting "U+2060
Word Joiner".
If Accept-Charset
permits, the unicode character itself can be inserted directly into the HTML output.
Otherwise, it can be done using entity encoding. E.g. to join the text red-brown
, use:
red-⁠brown
or (decimal equivalent):
red-⁠brown
. Another usable character is "U+FEFF
Zero Width No-break Space"[ 1 ]:
red-brown
and (decimal equivalent):
red-brown
[1]: Note that while this method still works in major browsers like Chrome, it has been deprecated since Unicode 3.2.
Comparison of "the joiner way" with "U+2011
Non-breaking Hyphen":
-
The word joiner can be used for all other characters, not just hyphens.
-
When using the word joiner, most renderers will rasterize the text identically. On Chrome, FireFox, IE, and Opera, the rendering of normal hyphens, eg:
> a-b-c-d-e-f-g-h-i-j-k-l-m-n-o-p-q-r-s-t-u-v-w-x-y-z
is identical to the rendering of normal hyphens (with U+2060 Word Joiner), eg:
> a-b-c-d-e-f-g-h-i-j-k-l-m-n-o-p-q-r-s-t-u-v-w-x-y-z
while the above two renders differ from the rendering of "Non-breaking Hyphen", eg:
> a‑b‑c‑d‑e‑f‑g‑h‑i‑j‑k‑l‑m‑n‑o‑p‑q‑r‑s‑t‑u‑v‑w‑x‑y‑z
. (The extent of the difference is browser-dependent and font-dependent. E.g. when using a font declaration of "arial
", Firefox and IE11 show relatively huge variations, while Chrome and Opera show smaller variations.)
Comparison of "the joiner way" with <span class=c1></span>
(CSS .c1 {white-space:nowrap;}
) and <nobr></nobr>
:
-
The word joiner can be used for situations where usage of HTML tags is restricted, e.g. forms of websites and forums.
-
On the spectrum of presentation and content, majority will consider the word joiner to be closer to content, when compared to tags.
• As tested on Windows 8.1 Core 64-bit using:
• IE 11.0.9600.18205
• Firefox 43.0.4
• Chrome 48.0.2564.109 (Official Build) m (32-bit)
• Opera 35.0.2066.92
Solution 5 - Html
Late to the party, but I think this is actually the most elegant. Use the WORD JOINER Unicode character ; on either side of your hyphen, or em dash, or any character.
So, like so:
⁠—⁠
This will join the symbol on both ends to its neighbors (without adding a space) and prevent line breaking.
Solution 6 - Html
Following on from @den’s useful JSX solution, this worked for me:
<h2>{props.name.replace('-', '-\u2060')}</h2>
Solution 7 - Html
JSX solution example using word joiner
unicode character:
<div>{`This is JSX-${'\u2060'}related example`}</div>