不间断的破折号,不是连字符

Non-breaking en dash, not a hyphen

我知道 html 中有一个不间断的连字符 (#8209),但我需要一个不间断的破折号 (#8211)。它们的用法不同。除了在我的文档中用不间断代码包装文本和破折号外,还有其他正确的方法吗,比如:

<nobr> TEXT #8211 TEXT </nobr>

尝试用 Word-Joiner 字符包围破折号 (#8288)。

TEXT&#8288;&#8211;&#8288;TEXT

根据这个 documentation 和其他关于 joiner 这个词的答案 &#8211;,下面的 HTML 应该产生一个不可破坏的破折号:

If the character does not have an HTML entity, you can use the decimal (dec) or hexadecimal (hex) reference.

<p>
Will break : 
<br />
 TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT&#8211;TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
<p>

<p>
Won't break (word joiner):     
<br />
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT&#8288;&#8211;&#8288;TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
<p>

这个问题让我在最近的项目中发疯。我发现很难相信破折号在默认情况下是中断字符。如果您可以使用 html 插入额外的字符,那么 &#8288; 效果很好。请注意,只有一个 word-joiner 是必要的 破折号之后,因为我相信他们之前不会中断。

出于多种原因,在我的源 HTML 中的任何地方手动添加额外的字符对我来说行不通,我想出了一个 javascript 解决方案,该解决方案会自动应用 .nobreak CSS class 到任何破折号和紧随其后的字符。

<style>
    .nobreak {
        white-space: nowrap;
    }
</style>

<body>

    <p>This is a paragraph with a number range, 1–34, and it will never break after the en dash.</p>

    <script>
        $("body").html(function(_, html) {
            return  html.replace(/(–.)/g, '<span class="nobreak"></span>')
        });
    </script>

</body>

一个更简单的解决方案可能是使用相同的脚本在破折号后自动插入 &#8288;。只需将js更改为:

$("body").html(function(_, html) {
    return  html.replace(/–/g, '–&#8288;')
});