我希望防止在连字符之后出现换行符-在与所有浏览器兼容的情况下。
例子:
我有这个文本:3-3/8"在HTML中是这样的:3-3/8”
问题是，在接近一行的末尾，由于连字符，它会中断并换行到下一行，而不是将其视为一个完整的单词……
3-
3/8"
我已经尝试插入“零宽度无间断字符”，运气不好……
3-3/8”
我在Safari中看到了这一点，并认为在所有浏览器中都是一样的。
下面是我的文档类型和字符编码…
<!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" />
有什么方法可以防止这些断行后连字符?我不需要任何解决方案，适用于整个页面…只是一些我可以在需要时插入的东西，比如“零宽度无中断字符”，除了一个有效的字符。
这是一个演示。只要使框架变窄，直到在连字符处断线。
http://jsfiddle.net/RagKH/
IE8/9使CanSpice回答中提到的不间断连字符比典型的连字符长。它是连字符的长度，而不是典型的连字符。这种显示上的差异让我无法接受。
由于我不能使用Deb指定的CSS答案，我转而选择使用无中断标记。
<nobr>e-mail</nobr>
此外，我还发现了导致IE8/9在连字符上出错的特定场景。
字符串包含由不间断空格分隔的单词-
宽度有限
包含破折号
IE渲染成这样。
下面的代码重现了上面所示的问题。我不得不使用一个元标签来强制渲染到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>
你也可以通过插入“U+2060 Word joiner”来实现“joiner方式”。
如果Accept-Charset允许，unicode字符本身可以直接插入到HTML输出中。
否则，可以使用实体编码来完成。例如，加入文本红棕色，使用:
red-⁠brown
或(十进制等效):
red-⁠brown
． 另一个可用的字符是“U+FEFF零宽度无间断空格”[]:
red-brown
和(十进制等效):
red-brown
[1]:注意，虽然此方法在Chrome等主要浏览器中仍然有效，但自Unicode 3.2以来已弃用。
“拼接方式”与“U+2011不间断连字符”的比较:
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.)
<span class=c1></span> (CSS .c1 {white-space:nowrap;})和<nobr></nobr>“joiner way”的比较:
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
IE8/9使CanSpice回答中提到的不间断连字符比典型的连字符长。它是连字符的长度，而不是典型的连字符。这种显示上的差异让我无法接受。
由于我不能使用Deb指定的CSS答案，我转而选择使用无中断标记。
<nobr>e-mail</nobr>
此外，我还发现了导致IE8/9在连字符上出错的特定场景。
字符串包含由不间断空格分隔的单词-
宽度有限
包含破折号
IE渲染成这样。
下面的代码重现了上面所示的问题。我不得不使用一个元标签来强制渲染到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>
