390

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

例子：

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

4

7 回答 7

643

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

于 2011-10-07T18:48:43.887 回答
300

你也可以用

<span style="white-space: nowrap;"></span>
于 2012-09-11T03:23:44.963 回答
27

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

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

<nobr>e-mail</nobr>

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

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

IE 是这样渲染的。

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

以下代码重现了上图所示的问题。我不得不使用元标记来强制渲染到 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>
于 2012-12-06T17:44:02.597 回答
19

您也可以通过插入“ U+2060Word 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不间断连字符”的比较：

  • 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

    而以上两种渲染与“ 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 显示出较小的变化。）

“细木工方式”与<span class=c1></span>(CSS .c1 {white-space:nowrap;}) 和的比较<nobr></nobr>：

  • joiner 一词可用于限制使用 HTML 标记的情况，例如网站和论坛的形式。

  • 在表示和内容的范围内，与标签相比，大多数人会认为单词 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

于 2016-03-08T03:11:36.457 回答
13

派对迟到了，但我认为这实际上是最优雅的。使用 WORD JOINER Unicode 字符⁠ ; 在连字符、破折号或任何字符的任一侧。

所以，就像这样：

&#8288;—&amp;#8288;

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

于 2018-03-19T04:59:49.997 回答
2

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

<h2>{props.name.replace('-', '-\u2060')}</h2>
于 2021-10-29T14:07:14.163 回答
1

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

<div>{`This is JSX-${'\u2060'}related example`}</div>
于 2021-10-22T08:38:02.183 回答