Html 连字符后没有换行符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7691569/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
No line-break after a hyphen
提问by Sparky
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”
我有这样的文字： 3-3/8"在 HTML 中是这样的： 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.
我在 Safari 中看到了这一点，并认为它在所有浏览器中都是一样的。
The following is my doctypeand character encoding...
以下是我的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" />
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.
这是一个演示。只需将框架变窄，直到在连字符处换行。
回答by CanSpice
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.
尝试使用不间断连字符‑。我已经用你的 jsfiddle 中的那个字符替换了破折号，把框架缩小到尽可能小，并且线条不再在那里分裂。
回答by Deb
You could also wrap the relevant text with
你也可以用
<span style="white-space: nowrap;"></span>
回答by mrtsherman
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.
IE8/9 使 CanSpice 的回答中提到的不间断连字符比典型的连字符更长。它是破折号的长度，而不是典型的连字符。这种显示差异对我来说是一个交易破坏者。
As I could not use the CSS answer specified by Deb I instead opted to use no break tags.
由于我无法使用 Deb 指定的 CSS 答案，因此我选择不使用中断标记。
<nobr>e-mail</nobr>
In addition I found a specific scenario that caused IE8/9 to break on a hyphen.
此外，我发现了一个导致 IE8/9 在连字符上中断的特定场景。
- A string contains words separated by non-breaking spaces -
- Width is limited
- Contains a dash
- 字符串包含由不间断空格分隔的单词 -
- 宽度有限
- 包含破折号
IE renders it like this.
IE 是这样渲染的。
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.
下面的代码重现了上图所示的问题。我不得不使用元标记来强制渲染到 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>
回答by Pacerier
You can also do it "the joiner way" by inserting "U+2060Word Joiner".
您也可以通过插入“ U+2060Word Joiner”来“以木匠的方式”做到这一点。
If Accept-Charsetpermits, the unicode character itself can be inserted directlyinto the HTML output.
如果Accept-Charset允许，Unicode 字符本身可以直接插入到 HTML 输出中。
Otherwise, it can be done using entity encoding. E.g. to join the text red-brown, use:
否则，可以使用实体编码来完成。例如加入文本red-brown，使用：
red-⁠brown
or (decimal equivalent):
或（十进制等值）：
red-⁠brown
. Another usable character is "U+FEFFZero Width No-break Space"[ 1 ]:
. 另一个可用的字符是“U+FEFF零宽度不间断空间” [ 1 ]：
red-brown
and (decimal equivalent):
和（十进制等值）：
red-brown
[1]: Note that while this method stillworks in major browsers like Chrome, it has been deprecated since Unicode 3.2.
[1]：请注意，虽然此方法在 Chrome 等主要浏览器中仍然有效，但自 Unicode 3.2 以来已被弃用。
Comparison of "the joiner way" with "U+2011Non-breaking Hyphen":
“细木工方式”与“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.)
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
而上述两种渲染与“不间断连字符”的渲染不同，例如：
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 显示出较小的变化。）
Comparison of "the joiner way" with <span class=c1></span>(CSS .c1 {white-space:nowrap;}) and <nobr></nobr>:
“木匠方式”与<span class=c1></span>(CSS .c1 {white-space:nowrap;}) 和 的比较<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
• 在 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
回答by Eckstein
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.
晚到晚了，但我觉得这其实是最优雅的。使用 WORD JOINER Unicode 字符; 在连字符、破折号或任何字符的任一侧。
So, like so:
所以，像这样：
⁠—⁠
This will join the symbol on both ends to its neighbors (without adding a space) and prevent line breaking.
这会将两端的符号连接到其邻居（不添加空格）并防止换行。
