连字符后没有换行符

我正在寻找防止连字符后面的换行符-与所有浏览器兼容的个案基础。

例:

我有这样的文字: 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" /> 

连字符之后有什么办法可以防止它们断线? 我不需要任何适用于整个页面的解决scheme…只要我可以根据需要插入一些东西,比如“零宽度不中断字符”,除了一个可以工作的东西。

这是一个演示。 简单地使框架变窄,直到连字符断开。

http://jsfiddle.net/RagKH/

尝试使用不&#8209;连字符&#8209; 。 我已经用你的jsfiddle中的那个字符replace了短划线,缩小了框架,尽可能小,并且线不再分裂。

你也可以用相关的文字来包装

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

IE8 / 9使得CanSpice的答案中提到的不分段连字符比一个典型的连字符长。 这是一个连字符的长度,而不是一个典型的连字符。 这种显示差异对我来说是一个破坏者。

由于我不能使用由Deb I指定的CSS答案,而是select不使用中断标签。

 <nobr>e-mail</nobr> 

此外,我发现一个特定的情况,导致IE8 / 9打破连字符。

  • 一个string包含以非分隔空格分隔的单词 – &nbsp;
  • 宽度有限
  • 包含一个破折号

IE呈现这样。

IE8 / 9中连字符断点的例子

下面的代码重现了上面的问题。 我必须使用元标记强制渲染到IE9,IE10已经解决了这个问题。 没有小提琴,因为它不支持meta标签。

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

你也可以通过插入“ U+2060 Word Joiner ”来实现“木匠的方式”。

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

否则,可以使用实体编码完成。 例如join文本red-brown ,请使用:

 red-&#x2060;brown 

或(十进制等值):

 red-&#8288;brown 

。 另一个可用的字符是“ U+FEFF Zero Width No-break Space[⁠&hairsp;⁠1&hairsp;]

 red-&#xfeff;brown 

和(十进制等值):

 red-&#65279;brown 

[1] :请注意,尽pipe此方法在Chrome等主stream浏览器中仍然有效,但自从Unicode 3.2以来 ,它已被弃用 。


“木匠之路”与“ U+2011不折断 ”之比较

  • joiner这个词可以用于所有其他字符,而不仅仅是连字符。

  • 当使用joiner这个词时,大多数渲染器会相同地光栅化文本。 在Chrome,FireFox,IE和Opera上,正常连字符的渲染,例如:

    ABCDEFGHIJKLMNOPQRSTU-VWXYZ

    与正常连字符的渲染(使用U + 2060字连接符)相同,例如:

    一个-⁠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- ž

    。 (差异的程度取决于浏览器和依赖于字体,例如,当使用“ arial ”的字体声明时,Firefox和IE11显示的变化相对较大,而Chrome和Opera则显示较小的变化。

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

  • joiner这个词可以用来限制HTML标签的使用,例如网站和论坛的forms。

  • 在performanceforms和内容方面 ,大多数人认为与标签相比,木匠这个词更贴近内容。


•使用以下Windows 8.1核心64位进行testing:
•IE 11.0.9600.18205
•Firefox 43.0.4
•Chrome 48.0.2564.109(官方版本)m(32位)
•Opera 35.0.2066.92