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

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

例：

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

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

3-

3/8"

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

3-3/8”

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

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

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在连字符后我有什么方法可以防止这些断线？我不需要任何适用于整个页面的解决方案...只是我可以根据需要插入的内容，如"零宽度无中断字符"，除了一个有效。

这是一个演示。只需将框架缩小，直到连字符处的线条断开。

http://jsfiddle.net/RagKH/

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

使用charset = utf-8你可以输入吗？ 一个不断的连字符

@QuentinUK，对......那不是已经接受的答案吗？ 是一个不间断的连字符。

是普通的ASCII，所以utf-8不是必需的。 使用页面的utf-8编码，可以输入实际字符。？ 与性格不同 - 尽管它看起来一样。

您编写的HTML的正确HTML将是3-3/8″或3-3/8″。 行情不是素数。 如果你想要纯ASCII，只需使用直双引号(")。 优选地，如果它将被呈现为良好，易读的文本，您将改为使用33/8″，显示"3？"

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

我认为它就像是不间断的空间，所以我只是搜索"非破坏性的破折号"，最后来到这里。 :-)

啊......我做了一个"没有休息的角色"搜索并用那个击中了墙。我从未想过有一个不会破坏的独立连字符。

在IE8 / 9中，此角色的渲染时间比典型的连字符长。它似乎与en-dash大小相同。

结果可能与正常连字符不同的原因是许多字体不包含非断开连字符。这会强制浏览器使用不同的字体，虽然非断开连字符看起来与该字体中的普通连字符相同，但无法保证它与来自不同字体的普通连字符匹配。

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

这也适用于Android！

这听起来像我需要的答案，尽管Deb的以下答案是我最初解决问题的原因。直到我看到xmojmr的评论，所以现在我回到这个答案，除了以上不起作用。认识到@Jukka K. Korpela的评论，我现在想知道大多数网络安全字体，如Helvetica和Arial，都没有这个字符，因为我似乎无法使用这些字体。

您也可以用相关文本换行

是的，这是一个比接受的imho更好的答案。谢谢@Deb。

@CMH如果你想要包装空格(用户看到空格的空白处 - 没有空格)，但是你不想用连字符分割单词，例如单词"电子邮件"。在这种情况下，接受的答案有帮助

在这种情况下，您只能在"电子邮件"周围使用span。

@CMH，这是一个很好的答案，也有效，所以我投了票。但是，我选择不接受这个答案，因为我要求一个不会自动突破到下一行的角色。在某些浏览器中，"不间断连字符"()可能比常规连字符略长，这对我来说是微不足道的。

@Sparky使用不同字符的一个问题是它会弄乱搜索结果。试图在页面上找到"3-3 / 8"将找不到不间断的连字符。

虽然IMO这是网页的最佳答案，但在html电子邮件中至少Outlook 2013不尊重CSS。来自@CanSpice的非破坏连字符解决方案虽然适用于Outlook。

不适用于Chrome中的模态/对话框(角度材质)。创建水平和垂直滚动条。

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

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

e-mail

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

字符串包含由不间断空格分隔的单词 -

宽度有限

包含破折号

IE渲染它就像这样。

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

body { padding: 20px; }

div { width: 300px; border: 1px solid gray; }

Ifthereisa-andwordsareseparatedbythewhitespacecodethenIEwillwraponthedash.

使用nobr是最跨浏览器的方式，并且独立于字体和CSS。 nobr元素未在HTML规范中定义，但这应仅视为形式。但是如果你必须按HTML规范编写，那么Deb的答案，使用CSS，是最好的选择。

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

@RyanAhearn - 我正在使用第三方工具，它不能让我对html有太多控制权。它不支持内联标记声明。

@mrtsherman你可以分享这个工具的链接吗？

而不是''你可能不只是使用带有类的跨度并使用CSS控制它？

@StephenESC - 我无法使用替代连字符(正如我在答案中指出的那样，因为它显示不正确)。跨度也不会阻止连字符断开。您可以使用我提供的代码示例并亲自尝试。也就是说，如果你能找到IE8 / 9。这些天变得越来越难看。

请注意，nobr标记是非标准的，可能会随时中断。 MDN文档不建议使用此标记：developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr

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

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

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

red-brown

或(十进制等值)：

red-brown

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

red-brown

和(十进制当量)：

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

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

如果" -"后跟一些unicode char，似乎"U + 2060"不起作用：像这样bingo-bongo

尽管持续负面按

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

所以，像这样：

—

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

在Windows 10上，出于某种原因，我能够使用ALT + 0173(软连字符)使其工作。