logo标签列表

一个连字符后没有换行

htmlcsscharacter-encodingline-breakshyphenation
422

我想针对个别情况，在所有浏览器上避免在连字符-后出现换行。

例如：

我有这段文本：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" />

有没有办法防止这些在连字符后换行？我不需要适用于整个页面的任何解决方案...只需要像“零宽度不断空格字符”一样按需要插入的东西，除了可以工作。

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

http://jsfiddle.net/RagKH/

@EricLeschinski，这已经作为一个答案发布了：https://dev59.com/Cmsz5IYBdhLWcg3wv6ju#12362315 - Sparky
通过使用 charset=utf-8，您可以插入非断行连字符。 - QuentinUK
@QuentinUK，对的...那不是已经被接受的答案了吗？&#8209;是一个非断开连字符。 - Sparky
1
“‑”是普通的ASCII字符，因此不需要使用utf-8编码。使用utf-8编码的页面可以输入实际字符。“‑”虽然看起来相同，但并不是“-”字符。 - QuentinUK
你所写的正确HTML应该是3-3/8&Prime;或者3-3/8&#x2033;。引号不是prime符号。如果你想要纯ASCII，只需使用直接的双引号(&#x22;)。最好的方式是，如果它将被呈现为良好、易读的文本，你应该使用3<span style="font-variant: diagonal-fractions">3/8</style>&Prime;，显示‘3⅜″’。 - Canned Man
这个重复的问题提供了一个非常有用的答案。 - Cadoiz
7个回答
676

尝试使用不间断连字符&#8209;。我已经在您的jsfiddle中用该字符替换了破折号，并将框架缩小到最小，此时该行不再分裂。

12
我想这就像不间断空格一样，所以我搜索了“不间断破折号”，然后就来到了这里。 :-) - CanSpice
7
在IE8/9浏览器中，这个字符的长度比普通的连字符长。它看起来与短划线一样长。 - mrtsherman
30
结果与普通连字符不同的原因是许多字体中没有包含不断行连字符。这迫使浏览器使用其他字体，尽管在那种字体中不断行连字符看起来与普通连字符相同，但不能保证它与另一种字体中的普通连字符相匹配。 - Jukka K. Korpela
6
我认为Deb的回答是最好的。 - Ray Cheng
这听起来像是我需要的答案，尽管Deb下面的回答是我最初解决问题的方法。直到我看到xmojmr的评论，现在我又回到了这个答案，但是上面的方法不起作用。鉴于@Jukka K. Korpela的评论，我现在想知道大多数网络安全字体（如Helvetica和Arial）是否没有这个字符，因为我似乎无法使用这些字体使其工作。 - NinjaKC
显示剩余3条评论
324

你还可以将相关文本用 <mark> 标签包围起来

<span style="white-space: nowrap;"></span>
19
是的，这个答案我认为比被接受的那个更好。感谢@Deb。 - CMH
53
如果您希望包装空格（用户看到的空白区域 - 无内容），但不想用连字符拆分单词，例如“电子邮件”一词，那么@ CMH提供的方案并不能解决您的问题。 接受的答案可以在这种情况下提供帮助。 - xmojmr
14
在这种情况下，您只需要将“e-mail”用 span 标签包裹起来即可。 - guirto
4
@CMH，这是一个可行的好答案，所以我给它点了赞。但是我选择不接受这个答案，因为我要求一个字符，它不会自动断行。对于“非断字连字符”(&#8209;) 可能在某些浏览器中渲染略长一些的事实对我来说微不足道。 - Sparky
18
@Sparky 使用不同的字符会导致搜索结果混乱是一个问题。在页面上查找“3-3/8”将无法找到非断开连字符。 - Mr Lister
显示剩余6条评论
29

在CanSpice的答案中提到，IE8/9呈现的非断字连字符比典型连字符要长。它的长度与en-dash相同，而不是典型连字符的长度。这种显示差异对我来说是一个致命缺陷。

由于我无法使用Deb指定的CSS答案，所以我选择使用不间断空格标签。

<nobr>e-mail</nobr>

另外，我发现了一个导致 IE8/9 在连字符上出问题的特定场景：

  • 字符串包含用非断空格 - &nbsp; 分隔的单词
  • 宽度受限
  • 包含破折号

IE 会像这样呈现它:

IE8/9中连字符断裂的示例

以下代码可以重现上述问题。我不得不使用 meta 标签将渲染强制为 IE9，因为 IE10 已经修复了此问题。没有fiddle，因为它不支持meta标签。

<!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>
7
使用nobr是最兼容的方式，不受字体和CSS影响。虽然nobr元素在HTML规范中未被定义，但这只是形式上的问题。但如果你必须按照HTML规范编写，则Deb的答案使用CSS是最佳选择。 - Jukka K. Korpela
5
我很好奇为什么你不能使用CSS解决方案。 - Ryan Ahearn
2
@RyanAhearn - 我正在使用一个第三方工具，它不允许我对HTML进行太多的控制。它不支持内联标签声明。 - mrtsherman
你可不可以用一个带有类的span标签，并使用CSS来控制它，而不是使用'<nobr>'呢？ - StephenESC
@StephenESC - 我无法使用替代连字符（正如我在我的答案中指出的那样，因为它会显示不正确）。一个span也无法防止在连字符上断开。您可以使用我提供的代码示例并尝试自己。也就是说，如果您能找到IE8/9。这些日子越来越少见了。 - mrtsherman
3
请注意，nobr 标签是非标准的，随时可能会出现问题。MDN 文档不建议使用这个标签：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr - Philipp
25

您也可以通过插入 "U+2060 Word Joiner" 来执行“连接器方法”。

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

否则，可以使用实体编码来完成。例如，要连接文本 red-brown，请使用:

red-&#x2060;brown

或（十进制等价）：
red-&#8288;brown

另一个可用的字符是 "U+FEFF 零宽不换行空格"[⁠ ⁠1 ]:

red-&#xfeff;brown

和（十进制等价）：

red-&#65279;brown

[1]：请注意，虽然这种方法在像Chrome这样的主流浏览器中仍然有效，但它已经自Unicode 3.2起被弃用。

"连接符方式"与 "U+2011 非断点连字符"的比较：

  • 单词连接器可用于所有其他字符，不仅限于连字符。

  • 使用单词连接器时，大多数渲染器将以相同的方式光栅化文本。在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单词连接器）的呈现方式相同，例如：

    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显示较小的变化。）

“连接符方式”与<span class=c1></span>（CSS .c1 {white-space:nowrap;}）和<nobr></nobr>的比较：

  • 在HTML标签使用受限的情况下，可以使用连接符。

  • 在展示和内容的光谱上，大多数人会认为连接符更接近于内容，而不是标签。

• 在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

在IE11中，“U+FEFF零宽度不间断空格”似乎无法正常工作。 - Ivan Gusev
似乎如果“-”后面跟着一些Unicode字符，如bingo-&#8288;bongo，那么“U+2060”就无法正常工作。 - Ivan Gusev
尽管不断受到负面报道 &#xfeff; - JamesWilson
1
太棒了！我正在使用一种字体，奇怪的是，非断行连字符显示为空格，所以这个真是救命稻草！谢谢！ :) - Pierre Paquette
16
晚来了，但我认为这确实是最优雅的方法。在您的连字号、破折号或任何字符的两侧使用单词连接器Unicode字符&#8288。

像这样：

&#8288;—&#8288;

这将把符号与其相邻的字符（不加空格）连接起来，并防止换行。

1
我能够在Windows 10上使用ALT+0173（软连字符）使其正常工作。 - pspahn
精彩的解决方案！这绝对是确保它能够正常工作的最佳方式，而无需担心你的字体是否支持不间断字符。 - Andron
4

在@den有用的JSX解决方案的基础上，以下内容对我有效：

<h2>{props.name.replace('-', '-\u2060')}</h2>
1
另外，replace('-', '\u2011')相当于不间断连字符或&#8209（在被接受的答案中提到）也是一个不错的选择。 - Shahriar
不错的回答。我只想补充一下，可以使用 RegExp 替换文本中的所有连字符而不仅仅是第一个：.replace(/-/gm, '-\u2060'); - Vincente
1

使用连字号 Unicode字符的JSX解决方案示例：

<div>{`This is JSX-${'\u2060'}related example`}</div>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接