No line-break after a hyphen
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.
Answer
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.