连字符后没有换行

340

我希望-在逐个连字符后防止与所有浏览器兼容的换行符。

例：

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

— 活泼的
source

@EricLeschinski，已经作为答案发布了： stackoverflow.com/a/12362315/594235

— Sparky

使用charset = utf-8，您可以输入一个不间断的连字符

— QuentinUK，

@QuentinUK，对……不是已经被接受的答案了吗？ ‑是不间断的连字符。

— Sparky

＆＃8209; 是普通的ASCII，因此不需要utf-8。通过页面的utf-8编码，可以放入实际字符。‑与-字符不同，尽管外观相同。

— QuentinUK '18

您编写的正确HTML是3-3/8″或3-3/8″。引号不是素数。如果要使用纯ASCII，只需使用双引号代替（"）。优选的，如果它要呈现的那么好，清晰的文字，你会转而使用33/8</style>″，施展“3⅜“”

— 罐头人

579

尝试使用不间断的连字符‑。我在jsfiddle中用该字符替换了破折号，将框架缩小到可以缩小的程度，并且该行不再拆分。

— CanSpice
source

10

我发现它就像是不间断的空间，因此我只搜索了“不间断的破折号”，然后到了这里。:-)

— CanSpice

啊...我做了一个“不间断字符”搜索，并以此撞墙。我从来没有想到有一个独立的连字符不会损坏。

— Sparky

6

在IE8 / 9中，此字符的渲染时间比典型的连字符长。它的大小似乎与破折号相同。

— mrtsherman

21

结果可能与常规连字符不同的原因是，许多字体不包含不间断连字符。这会迫使浏览器使用其他字体，并且不间断连字符与该字体中的普通连字符相同，但不能保证它与其他字体中的普通连字符匹配。

— Jukka K. Korpela

5

我认为Deb的答案是最好的。

— Ray Cheng

256

您也可以使用

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

— 德比
source

17

是的，这比公认的恕我直言更好。谢谢@Deb。

— CMH

38

@CMH如果您想包装空格（用户看到空格的空白位置-什么都没有），但是又不想用连字符分隔单词，例如单词“ e-mail”，则无济于事。在这种情况下，接受的答案会

— 有所

12

在这种情况下，您只能在“电子邮件”周围使用跨度。

— guirto 2014年

3

@CMH，这是一个很好的答案，也可以使用，因此我投票赞成。但是，我选择不接受此答案，因为我要求的字符不会自动中断到下一行。在某些浏览器中，“不间断连字符”（‑）可能比常规连字符呈现的时间更长的事实对我而言并不重要。

— 闪亮的

11

@Sparky使用不同字符的一个问题是，它会使搜索结果混乱。尝试在页面上找到“ 3-3 / 8”将不会找到连字符。

— 李斯特先生，2015年

23

IE8 / 9使CanSpice答案中提到的不间断连字符比典型的连字符更长。它是一个破折号的长度，而不是典型的连字符。这种显示差异对我来说是一个重大突破。

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

<nobr>e-mail</nobr>

另外，我发现了导致IE8 / 9连字符中断的特定情况。

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

IE就是这样渲染的。

IE8 / 9中的连字符破例

下面的代码重现了上图所示的问题。由于IE10已解决了该问题，因此我不得不使用一个meta标签来强制渲染到IE9。不用费劲，因为它不支持元标记。

<!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>

— Mrtsherman
source

6

使用nobr是最跨浏览器的方式，并且与字体和CSS无关。该nobr元素是不是在HTML规范定义，但是这应该被视为只是形式。但是，如果必须按照 HTML规范编写，那么使用CSS的Deb答案是最好的选择。

— Jukka K. Korpela

5

我很好奇为什么您不能使用CSS解决方案。

— Ryan Ahearn

2

@RyanAhearn-我正在使用第三方工具，该工具对HTML的控制不大。它不支持内联标签声明。

— mrtsherman

代替''，您是否不仅可以将span与类一起使用，还可以通过CSS控制它？

— StephenESC

1

请注意，该nobr标签是非标准的，可能随时会损坏。MDN文档不建议使用以下标记：developer.mozilla.org/zh-CN/docs/Web/HTML/Element/nobr

— Philipp

16

您也可以通过插入“ 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可以用于所有其他字符，而不仅仅是连字符。
当使用词语木匠，大多数渲染器将栅格化文字相同。在Chrome，FireFox，IE和Opera上，正常连字符的渲染，例如：

abcdefghijklmnopqrstu-vwxyz

与普通连字符（使用U + 2060 Word Joiner）的呈现相同，例如：

a-b-c-d-e-f-g-g-h-i-j-k-l-⁠m-⁠n-o-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-y ž

。（差异的程度取决于浏览器和字体。例如，使用字体声明“ arial”时，Firefox和IE11会显示相对较大的变化，而Chrome和Opera会显示较小的变化。）

比较“ joiner way”与（CSS .c1 {white-space:nowrap;}）和：

Joiner一词可用于限制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}

— 起搏器
source

似乎“ U + FEFF零宽度不间断空格”在IE11中无法正常工作。

— Ivan Gusev

如果“-”后跟一些Unicode字符，则“ U + 2060”似乎不起作用：像这样bingo-⁠bongo

— Ivan Gusev

尽管负面新闻持续不断

— -JamesWilson

5

晚会晚了，但是我认为这实际上是最优雅的。使用WORD JOINER Unicode字符＆＃8288 ; 在连字符，破折号或任何字符的任一侧。

所以，像这样：

&#8288;—&#8288;

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

— 埃克斯坦
source

由于某些原因，我能够在Windows 10上使用ALT + 0173（软连字符）来使其工作

— 。– pspahn