连字符后没有换行符答案

【问题标题】：No line-break after a hyphen连字符后没有换行符
【发布时间】：2011-12-03 05:50:10
【问题描述】：

我希望在与所有浏览器兼容的情况下逐个防止在连字符 - 后出现换行符。

例子：

我有这个文本：3-3/8" 在 HTML 中是这样的：3-3/8&rdquo;

问题是在行尾附近，由于连字符，它会中断并换行到下一行，而不是将其视为一个完整的单词...

3-
3/8"

我尝试插入“零宽度不中断字符”&#65279;，但没有成功...

3-&#65279;3/8&rdquo;

我在 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" />

有什么办法可以防止这些在连字符后换行吗？我不需要任何适用于整个页面的解决方案......我可以根据需要插入一些东西，比如“零宽度不中断字符”，除了一个有效的解决方案。

这是一个演示。只需将框架变窄，直到在连字符处换行。

http://jsfiddle.net/RagKH/

【问题讨论】：

@EricLeschinski，这已经作为答案发布了：stackoverflow.com/a/12362315/594235
使用 charset=utf-8 您可以输入 - 一个不中断的连字符
@QuentinUK，对……这不是已经被接受的答案吗？ &#8209; 是一个不间断的连字符。
‑是普通的ASCII，所以不需要utf-8。使用 utf-8 编码的页面可以放入实际字符。 - 与 - 不是同一个字符，虽然看起来一样。
您所写内容的正确 HTML 应为 3-3/8&Prime; 或 3-3/8&#x2033;。引号不是素数。如果您想要纯 ASCII 格式，只需使用直双引号 (&#x22;)。如果要以清晰易读的文本形式呈现，最好使用33/8</style>&Prime;，显示“3⅜″”

标签： html css character-encoding line-breaks hyphenation

【解决方案1】：

继 @den 有用的 JSX 解决方案之后，这对我有用：

<h2>{props.name.replace('-', '-\u2060')}</h2>

【讨论】：

另外replace('-', '\u2011') 等于不间断的连字符或&#8209（在接受的答案中提到）是一个不错的选择。
不错的答案。我只想添加 RegExp 来替换文本中的所有连字符而不是第一个：.replace(/-/gm, '-\u2060');

【解决方案2】：

使用word joiner unicode 字符的JSX 解决方案示例：

<div>{`This is JSX-${'\u2060'}related example`}</div>

【讨论】：

【解决方案3】：

晚会，但我认为这实际上是最优雅的。使用 WORD JOINER Unicode 字符&#8288；在连字符、破折号或任何字符的任一侧。

所以，就像这样：

&#8288;—&#8288;

这会将两端的符号连接到其邻居（不添加空格）并防止换行。

【讨论】：

由于某种原因，我能够在 Windows 10 上使用 ALT+0173（软连字符）使其工作。

【解决方案4】：

您也可以通过插入“U+2060 Word Joiner”来“以木匠方式”进行操作。

如果Accept-Charset 允许，Unicode 字符本身可以直接插入到 HTML 输出中。

否则，可以使用实体编码来完成。例如。加入文本red-brown，使用：

red-&#x2060;brown

或（等效的十进制）：

red-&#8288;brown

。另一个可用的字符是“U+FEFF Zero Width No-break Space”^{^{[⁠&hairsp;⁠1&hairsp;]}}：

red-&#xfeff;brown

和（十进制等效）：

red-&#65279;brown

^{[1]：请注意，虽然此方法仍然适用于 Chrome 等主流浏览器，但它具有 been deprecated since Unicode 3.2。}

“细木工方式”与“U+2011 Non-breaking Hyphen”的比较：

joiner 一词可用于所有其他字符，而不仅仅是连字符。
当使用单词 joiner 时，大多数渲染器会以相同方式对文本进行光栅化。在 Chrome、FireFox、IE 和 Opera 上，正常连字符的呈现，例如：

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

与普通连字符的渲染相同（使用 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 显示出较小的变化。）

“细木工方式”与（CSS .c1 {white-space:nowrap;}）和的比较：

joiner 一词可用于限制使用 HTML 标记的情况，例如：网站和论坛的形式。
在spectrum of presentation and content 上，与标签相比，大多数人会认为单词 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

【讨论】：

似乎“U+FEFF 零宽度不间断空格”在 IE11 中无法正常工作。
如果“-”后跟一些 unicode 字符，“U+2060”似乎不起作用：像这样bingo-&#8288;bongo
尽管不断有负面新闻&#xfeff;

【解决方案5】：

IE8/9 使 CanSpice 的答案中提到的不间断连字符比典型的连字符更长。它是短划线的长度，而不是典型的连字符。这种显示差异对我来说是一个交易破坏者。

由于我无法使用 Deb 指定的 CSS 答案，因此我选择不使用中断标签。

<nobr>e-mail</nobr>

此外，我发现了一个导致 IE8/9 在连字符上中断的特定场景。

字符串包含由不间断空格分隔的单词 - &nbsp;
宽度有限
包含破折号

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&nbsp;there&nbsp;is&nbsp;a&nbsp;-&nbsp;and&nbsp;words&nbsp;are&nbsp;separated&nbsp;by&nbsp;the&nbsp;whitespace&nbsp;code&nbsp;&amp;nbsp;&nbsp;then&nbsp;IE&nbsp;will&nbsp;wrap&nbsp;on&nbsp;the&nbsp;dash.</p>
        </div>
    </body>
</html>

【讨论】：

使用nobr是最跨浏览器的方式，并且独立于字体和CSS工作。 nobr 元素在 HTML 规范中没有定义，但这只是一种形式。但如果你必须按 HTML 规范编写，那么 Deb 的答案，使用 CSS，是最好的选择。
我很好奇你为什么不能使用 CSS 解决方案。
@RyanAhearn - 我使用的第三方工具无法让我对 html 进行太多控制。它不支持内联标签声明。
代替“”，你能不能只使用一个带类的跨度并使用 CSS 控制它？
请注意，nobr 标签是非标准的，可能随时中断。 MDN 文档不推荐使用这个标签：developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr

【解决方案6】：

你也可以用

包裹相关的文字

<span style="white-space: nowrap;"></span>

【讨论】：

是的，这是一个比接受的恕我直言更好的答案。谢谢@Deb。
@CMH 如果您想包装空格（用户看到空格的空白处 - 什么都没有），但您不想用连字符分隔单词，这将无济于事，例如“电子邮件”一词。在这种情况下，接受的答案会有所帮助
在这种情况下，您只能在“电子邮件”周围使用 span。
@CMH，这是一个很好的答案，也很有效，所以我投了赞成票。但是，我选择不接受这个答案，因为我要求一个不会自动跳到下一行的字符。在某些浏览器中，“不间断连字符”(&#8209;)可能的渲染时间比常规连字符略长，这一事实对我来说是微不足道的。
@Sparky 使用不同字符的一个问题是它会弄乱搜索结果。尝试在页面上查找“3-3/8”将找不到不间断的连字符。

【解决方案7】：

尝试使用不间断的连字符&#8209;。我已经用你的 jsfiddle 中的那个字符替换了破折号，将框架缩小到尽可能小，并且线条不再在那里分裂。

【讨论】：

我认为它类似于不间断空格，所以我只搜索了“不间断破折号”和ended up here。 :-)
啊……我做了一个 "no break character" 搜索并用 &#65279; 撞墙。我只是从未想过有一个独立的连字符不会中断。
在 IE8/9 中，此字符的呈现时间比典型的连字符长。它似乎与短划线大小相同。
结果可能与普通连字符不同的原因是许多字体不包含不间断的连字符。这会强制浏览器使用不同的字体，虽然不间断的连字符看起来与 that 字体中的正常连字符相同，但不能保证它与来自不同字体的正常连字符匹配。跨度>
我认为 Deb 的回答是最好的。