Question

我希望在连字符-之后根据具体情况阻止与所有浏览器兼容的换行符。

示例：

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

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

3-
3/8"

我尝试插入“零宽度不中断字符”，没有运气......

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/

Answer 1

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

Answer 2

您还可以使用

包装相关文本

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

Answer 3

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

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

<nobr>e-mail</nobr>

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

字符串包含由不间断空格分隔的单词 -  
宽度有限
包含短划线

IE渲染它就像这样。

Example of hyphen breaking in 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>

Answer 4

您也可以通过插入“U+2060 Word Joiner”来“加入方式”。

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

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

red-&#x2060;brown

或（十进制等效）：

red-&#8288;brown

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

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

虽然上述两个渲染与“非破解连字符”的渲染不同，例如：


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标签的情况，例如：网站和论坛的形式。
在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
功能}

Answer 5

派对迟到了，但我觉得这其实是最优雅的。使用WORD JOINER Unicode字符⁠在你的连字符的两边，或者破折号，或任何角色。

所以，就像这样：

&#8288;—&#8288;

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

连字符后没有换行符

5 个答案: