本文翻译自：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” 我有这样的文字： 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 doctype and 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. 只需将框架缩小，直到连字符处的线条断开。
http://jsfiddle.net/RagKH/ http://jsfiddle.net/RagKH/
#1楼
参考：https://stackoom.com/question/WGvZ/连字符后没有换行符
#2楼
您也可以用相关文本换行
<span style="white-space: nowrap;"></span>
#3楼
IE8/9 render the non-breaking hyphen mentioned in CanSpice's answer longer than a typical hyphen. IE8 / 9使CanSpice的答案中提到的非破坏连字符比典型的连字符更长。 It is the length of an en-dash instead of a typical hyphen. 它是en-dash的长度而不是典型的连字符。 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. 因为我不能使用Deb我指定的CSS答案而是选择不使用break标记。
<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. 我不得不使用元标记强制渲染到IE9，因为IE10修复了这个问题。 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>
#4楼
You can also do it "the joiner way" by inserting " U+2060 Word Joiner ". 您也可以通过插入“ U+2060 Word Joiner ”来实现“木匠方式”。
If Accept-Charset permits, the unicode character itself can be inserted directly into the HTML output. 如果Accept-Charset允许，则可以将unicode字符本身直接插入HTML输出中。
Otherwise, it can be done using entity encoding. 否则，可以使用实体编码来完成。 Eg to join the text red-brown , use: 例如，要加入文本red-brown ，请使用：
red-⁠brown
or (decimal equivalent): 或（十进制等值）：
red-⁠brown
. 。 Another usable character is " U+FEFF Zero Width No-break Space " [ 1 ] : 另一个可用的字符是“ U+FEFF零宽度 不间断空间 ” [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 . [1] ：请注意，尽管此方法仍适用于Chrome等主流浏览器，但自Unicode 3.2以来已弃用 。
Comparison of "the joiner way" with " U+2011 Non-breaking Hyphen ": “木匠方式”与“ U+2011非破坏连字符 ”的比较：
The word joiner can be used for all other characters, not just hyphens. 单词joiner可用于所有其他字符，而不仅仅是连字符。
When using the word joiner, most renderers will rasterize the text identically . 使用单词joiner时，大多数渲染器会以相同的方式栅格化文本。 On Chrome, FireFox, IE, and Opera, the rendering of normal hyphens, eg: 在Chrome，FireFox，IE和Opera上，正常连字符的渲染，例如：
abcdefghijklmnopqrstu-vwxyz ABCDEFGHIJKLMNOPQRSTU-VWXYZ
is identical to the rendering of normal hyphens (with U+2060 Word Joiner), eg: 与正常连字符的渲染（使用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 一个-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 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- ž
. 。 (The extent of the difference is browser-dependent and font-dependent. Eg when using a font declaration of "
arial", Firefox and IE11 show relatively huge variations, while Chrome and Opera show smaller variations.) （差异的程度取决于浏览器和字体。例如，当使用“arial”的字体声明时，Firefox和IE11显示相对较大的变化，而Chrome和Opera显示较小的变化。）
Comparison of "the joiner way" with <span class=c1></span> (CSS .c1 {white-space:nowrap;} ) and <nobr></nobr> : “joiner方式”与<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, eg forms of websites and forums. 单词joiner可用于限制HTML标签使用的情况，例如网站和论坛的形式。
On the spectrum of presentation and content , majority will consider the word joiner to be closer to content, when compared to tags. 在演示和内容的范围内 ，与标签相比，大多数人会认为joiner这个词更接近内容。
• As tested on Windows 8.1 Core 64-bit using: •在Windows 8.1 Core 64位上测试使用：
• IE 11.0.9600.18205 •IE 11.0.9600.18205
• Firefox 43.0.4 •Firefox 43.0.4
• Chrome 48.0.2564.109 (Official Build) m (32-bit) •Chrome 48.0.2564.109（官方版本）m（32位）
• Opera 35.0.2066.92 •Opera 35.0.2066.92
#5楼
Late to the party, but I think this is actually the most elegant. 晚到晚会，但我觉得这其实是最优雅的。 Use the WORD JOINER Unicode character ⁠ ; 使用WORD JOINER Unicode字符＆＃8288 ; 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. 这会将两端的符号连接到其邻居（不添加空格）并防止换行。
#6楼
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中的那个字符替换了破折号，将框架缩小到尽可能小的范围，并且线条不再分裂。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
