关于html：连字符后没有换行符


No line-break after a hyphen

我希望在一个与所有浏览器兼容的个案基础上阻止连字符-之后的换行符。

例：

我有这样的文字：3-3/8"在HTML中是这样的：3-3/8”

问题是，在一行的末尾附近，由于连字符，它会断开并包裹到下一行，而不是像完整的单词一样对待它...

1
2
3-
3/8"

我试过插入"零宽度不中断字符"，没有运气......

1
3-3/8”

我在Safari中看到了这一点，并认为它在所有浏览器中都是一样的。

以下是我的doctype和字符编码......

1
2
3
4
5
<!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/

相关讨论

尝试使用非断开连字符。我已经用jsfiddle中的那个字符替换了破折号，将框架缩小到尽可能小的范围，并且线条不再分裂。

相关讨论

您也可以用相关文本换行

1
<span style="white-space: nowrap;"></span>
相关讨论

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

因为我不能使用Deb我指定的CSS答案而是选择不使用break标记。

1
<nobr>e-mail</nobr>

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

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

IE渲染它就像这样。

Example of hyphen breaking in IE8/9

以下代码再现了上图所示的问题。我不得不使用元标记强制渲染到IE9，因为IE10修复了这个问题。没有小提琴，因为它不支持元标记。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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>
             
            <p>
Ifthereisa-andwordsareseparatedbythewhitespacecodethenIEwillwraponthedash.
</p>
       
    </body>
</html>
相关讨论

您也可以通过插入"U+2060 Word Joiner"来实现"木匠方式"。

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

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

1
red-brown

或(十进制等值)：

1
red-brown

。另一个可用的字符是"U+FEFF零宽度不间断空间"[1]：

1
red-&#xfeff;brown

和(十进制当量)：

1
red-&#65279;brown

[1]：请注意，尽管此方法仍适用于Chrome等主流浏览器，但自Unicode 3.2以来已弃用。

"木匠方式"与"U+2011非破坏连字符"的比较：

  • 单词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

    而上述两种渲染与"非破坏连字符"的渲染不同，例如：

    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标签的使用的情况，例如，网站和论坛的形式。

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

相关讨论

晚到晚会，但我觉得这其实是最优雅的。在连字符或短划线或任何字符的任一侧使用WORD JOINER Unicode字符。

所以，像这样：

1
—

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

相关讨论