连字符后没有换行符
我希望在与所有浏览器兼容的情况下逐个防止在连字符 - 后出现换行符。
例子：
我有这个文本：3-3/8" 在 HTML 中是这样的：3-3/8”
问题是在行尾附近，由于连字符，它会中断并换行到下一行，而不是将其视为一个完整的单词......
3-
3/8"
我试过插入“零宽度不中断字符”，没有运气......
3-3/8”
我在 Safari 中看到了这一点，并认为它在所有浏览器中都是一样的。
以下是我的 doctype 和字符编码...
<!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" />
有什么办法可以防止这些在连字符后换行吗？我不需要任何适用于整个页面的解决方案......只是我可以根据需要插入的东西，比如“零宽度不中断字符”，除了一个有效的。
这是一个演示。只需使框架变窄，直到在连字符处换行。
‑ 是一个不间断的连字符。
3-3/8″ 或 3-3/8″。引号不是素数。如果您想要纯 ASCII 格式，只需使用直双引号 (")。最好，如果要以清晰易读的文本形式呈现，您可以改用 3<span style="font-variant: diagonal-fractions">3/8</style>″，显示“3⅜”
尝试使用不间断的连字符 ‑。我已经用您的 jsfiddle 中的那个字符替换了破折号，将框架缩小到尽可能小，并且线条不再在那里分裂。
你也可以用
<span style="white-space: nowrap;"></span>
‑) 可能 的渲染时间比常规连字符稍长，这一事实对我来说是微不足道的。
IE8/9 使 CanSpice 的答案中提到的不间断连字符比典型的连字符更长。它是短划线的长度，而不是典型的连字符。这种显示差异对我来说是一个交易破坏者。
由于我无法使用 Deb 指定的 CSS 答案，因此我选择不使用中断标签。
<nobr>e-mail</nobr>
此外，我发现了一个导致 IE8/9 在连字符上中断的特定场景。
字符串包含由不间断空格分隔的单词 -
宽度有限
包含破折号
IE 是这样渲染的。
https://i.stack.imgur.com/Uxw7L.png
以下代码重现了上图所示的问题。我不得不使用元标记来强制渲染到 IE9，因为 IE10 已经解决了这个问题。没有小提琴，因为它不支持元标记。
<!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>
nobr 是最跨浏览器的方式，并且独立于字体和 CSS 工作。 nobr 元素未在 HTML 规范中定义，但这仅应视为一种形式。但是，如果您必须按 HTML 规范编写，那么 Deb 使用 CSS 的答案是最佳选择。
nobr 标记是非标准的，可能随时中断。 MDN 文档不建议使用此标记：developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr
您也可以通过插入“U+2060 Word Joiner”来“以木匠方式”进行操作。
如果 Accept-Charset 允许，则可以将 Unicode 字符本身直接插入到 HTML 输出中。
否则，可以使用实体编码来完成。例如加入文本 red-brown，使用：
red-⁠brown
或（十进制等值）：
red-⁠brown
.另一个可用的字符是“U+FEFF Zero Width No-break Space”[1]：
red-brown
和（十进制等值）：
red-brown
[1]：请注意，虽然此方法仍然适用于 Chrome 等主流浏览器，但它具有 been deprecated since Unicode 3.2。
“木匠方式”与“U+2011 Non-breaking Hyphen”的比较：
joiner 一词可用于所有其他字符，而不仅仅是连字符。
当使用单词 joiner 时，大多数渲染器都会对文本进行相同的光栅化。在 Chrome、FireFox、IE 和 Opera 上，普通连字符的呈现，例如：abcdefghijklmnopqrstu-vwxyz 与普通连字符的呈现相同（使用 U+2060 Word Joiner），例如：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 而上述两个渲染与“Non-break Hyphen”的渲染不同，例如：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 。 （差异程度取决于浏览器和字体。例如，当使用“arial”字体声明时，Firefox 和 IE11 显示出相对较大的变化，而 Chrome 和 Opera 显示出较小的变化。）
“连接器方式”与 <span class=c1></span> (CSS .c1 {white-space:nowrap;}) 和 <nobr></nobr> 的比较：
joiner 一词可用于限制使用 HTML 标记的情况，例如网站和论坛的形式。
在表示和内容的范围内，与标签相比，大多数人会认为单词 joiner 更接近内容。
• 在 Windows 8.1 Core 64 位上进行测试，使用： • IE 11.0.9600.18205 • Firefox 43.0.4 • Chrome 48.0.2564.109（官方版本）m（32 位） • Opera 35.0.2066.92
bingo-⁠bongo

派对迟到了，但我认为这实际上是最优雅的。使用 WORD JOINER Unicode 字符 ⁠；在连字符、破折号或任何字符的任一侧。
所以，就像这样：
⁠—⁠
这会将两端的符号连接到其邻居（不添加空格）并防止换行。
继@den 有用的 JSX 解决方案之后，这对我有用：
<h2>{props.name.replace('-', '-\u2060')}</h2>
replace('-', '\u2011') 等于不间断连字符或 ‑ （在接受的答案中提到）是一个不错的选择。
.replace(/-/gm, '-\u2060');
关注公众号
不定期副业成功案例分享
撞墙了。我只是从未想过有一个独立的连字符不会中断。