Internet Explorer 中的文本换行不正确答案

【问题标题】：Text wrapping incorrectly in Internet ExplorerInternet Explorer 中的文本换行不正确
【发布时间】：2012-09-13 09:00:54
【问题描述】：

为用户提供帮助 - 当他们点击问号时会出现一个 div：

一个 javascript 函数使 div 出现：

function showhelpby(whichdiv,e,divwidth,leftorright,message)
{
    e=(!e)?window.event:e;//IE:Moz

    document.getElementById(whichdiv).style.display = 'block';
    document.getElementById(whichdiv).style.width = divwidth + 'px';
    if (leftorright == 'left')
    {
        if (e.pageX)
        {
        document.getElementById(whichdiv).style.left = e.pageX - divwidth - 20 + 'px';
        document.getElementById(whichdiv).style.top = e.pageY + 'px';
        }
        else if(e.clientX)
        {
        document.getElementById(whichdiv).style.left = window.event.clientX - divwidth - 20 + 'px';
        document.getElementById(whichdiv).style.top = window.event.clientY + 'px';    
        }
    }
    else
    {
        if (e.pageX)
        {
        document.getElementById(whichdiv).style.left = e.pageX + 20 + 'px';
        document.getElementById(whichdiv).style.top = e.pageY + 'px';
        }
        else if(e.clientX)
        {
        document.getElementById(whichdiv).style.left = window.event.clientX + 20 + 'px';
        document.getElementById(whichdiv).style.top = window.event.clientY + 'px';
        }
    }
    document.getElementById('message').innerHTML = message;
}

出现的 div 的 css 是：

div.notes
{
font-family: Verdana;
font-size: 12px;
color: #000066;
line-height:140%;
display:none;
border-style:solid;
border-width:2px;
border-color:#000099;
position:absolute;
padding:15px;
background-color:#FFFFFF;
background-image:url(images/F3F3F3White200.jpg);
background-repeat:repeat-x;
overflow-y:auto;
overflow-x:hidden;
z-index:201;
}

在 div 中显示的文本位于 <p> 标记中，没有应用 css 样式。

多年来我一直在使用上面的内容来显示弹出的小“帮助”div。

现在，突然之间，在 Visual Studio 2010 中开发一个网站 - 用于 Intranet - 正在使用 IE 9 查看（发布后）（我们必须使用 IE） - 我的帮助 div 中的文本不换行适当地。 文本显示合理，字词随意中断。这与长词不中断无关。单词“the”可能在一行以“t”结尾，而在下一行以“he”结尾。

除了通常抱怨“该死的 Internet Explorer - 他们什么都不做吗？” - 任何人都知道我需要做些什么才能在固定宽度的 div 内正确换行文本这样基本的东西？

【问题讨论】：

听起来你的弹出窗口中的文本受文档css的影响。你看过 Chrome 或 Firefox 吗？
贴出的代码很难产生所描述的问题。请提供说明问题的独立文档。（很可能是您使用的某些工具注入了导致问题的 CSS 规则。）
但是什么 css 规则可以对单词 'the' 说在 't' 上打断并将 'he' 放在下一行？
在 Firefox 中看起来不错 - 这与 IE 的兼容模式有关吗？我真的不想告诉每个用户在兼容模式下运行 IE 9.0 以用于 Intranet 站点 - 只是为了使文本正确换行。
请尝试在 jsfiddle.net 上重新创建问题，以便我们可以在那里解决它。

标签： javascript css internet-explorer

【解决方案1】：

您是否尝试过添加 word-break:normal？ http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

【讨论】：