连字符后没有换行

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

例子:

我有这个文本: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/ < a href = " http://jsfiddle.net/RagKH/ " > < / >

207112 次浏览
小开
最佳答案

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

小开

您还可以用

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

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>
小开

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

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

否则，可以使用实体编码来完成。例如，要连接文本red-brown，使用:

red-&#x2060;brown

或(十进制等效):

red-&#8288;brown

． 另一个可用的字符是"U+FEFF零宽度不间断空格 . 0"<一口> [& # x2060;   & # x2060; 1  】:

red-&#xfeff;brown

和(十进制等效):

red-&#65279;brown
< p > <一口> < em > [1] < / em >:注意，虽然这个方法仍然可以在Chrome等主要浏览器中工作，但它有自Unicode 3.2以来已弃用。 < /一口> < / p >

“joiner way”与“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字Joiner)，例如:

    & # x2060; b & # x2060; c & # x2060; d & # x2060; e - # x2060; f & # x2060; g & # x2060; h & # x2060;我& # x2060; j & # x2060; k - # x2060; l - # x2060; m & # x2060; n - # x2060; o & # x2060; p & # x2060; q & # x2060; r & # x2060; s & # x2060; t & # x2060; u - # x2060; v & # x2060; w & # x2060; x - # x2060; y & # x2060; z

    而上面的两个渲染不同于“不换行字符”的渲染，例如:

    一个# x2011; b # x2011; c # x2011; d # x2011; e # x2011; f # x2011;舌鳎# x2011; h # x2011;我# x2011;强生# x2011; k # x2011; l # x2011;猴x2011; n # x2011; o # x2011; p # x2011;提问# x2011; " # x2011; & # x2011; t # x2011; u # x2011; v # x2011; w # x2011; x # x2011; y # x2011; z

    ． (区别的程度取决于浏览器和字体。例如，当使用“arial”字体声明时，Firefox和IE11显示出相对较大的变化，而Chrome和Opera显示出较小的变化。

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

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

  • 在光谱的表示和内容上，大多数人会认为单词joiner与标签相比更接近内容。

< p > <一口> 牛;在Windows 8.1 Core 64位上使用以下方法进行测试: < br >,,,,牛;IE 11.0.9600.18205 < br >,,,,牛;Firefox 43.0.4 < br >,,,,牛;Chrome 48.0.2564.109(官方版本)m(32位) < br >,,,,牛;歌剧35.0.2066.92 < /一口> < / p >
小开

迟到了，但我觉得这其实是最优雅的。使用WORD JOINER Unicode字符, # 8288;在连字符、破折号或任何字符的两侧。

所以，就像这样:

&#8288;—&#8288;

这将把两端的符号连接到它的邻居(不添加空格)，并防止断行。

小开

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

<div>{`This is JSX-${'\u2060'}related example`}</div>
小开

遵循@den的有用的JSX解决方案，这对我来说很有效:

<h2>{props.name.replace('-', '-\u2060')}</h2>

提交答案