我希望防止在连字符之后出现换行符-在与所有浏览器兼容的情况下。

例子:

我有这个文本:3-3/8"在HTML中是这样的:3-3/8”

问题是,在接近一行的末尾,由于连字符,它会中断并换行到下一行,而不是将其视为一个完整的单词……

3-
3/8"

我已经尝试插入“零宽度无间断字符”,运气不好……

3-3/8”

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

下面是我的文档类型和字符编码…

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


当前回答

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

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

其他回答

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

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

您还可以用

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

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

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

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

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

所以,就像这样:

&#8288;—&#8288;

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