带有括号的IE10上的文本换行问题

Question

我在导航菜单中有一个链接，在IE10上没有正确包装。

当使用括号有条件复数时，IE10会将单词切成2行。我期待整个单词＆＃34; link（s）＆＃34;如果没有足够的空间，请转到下一行，就像Chrome正在做的那样。

它应该是这样的：

Hello worldddd
link(s)

我尝试使用不同的word-wrap和word-break属性，但它没有修复它。如果我使用white-space: nowrap，则该字词不会转到下一行。我不想强迫这个词转到所有浏览器的下一行。

您知道我可以做些什么来解决这个IE问题吗？

Answer 1

我们假设您有这样的文字：

<p>this is a longer <span class="nowrap">test(s)</span></p>

然后您需要做的就是应用以下CSS：

p {
    word-break: break-word;
}

@media all and (-ms-high-contrast:none)
{
    /*target IE10*/
    .nowrap {
        white-space: pre;
    }
    /*target IE11*/
    *::-ms-backdrop, .nowrap {
        white-space: pre;
    }
}

working jsfiddle - 您可以调整HTML输入区域的大小以查看差异