'overflow-y:auto' 的 CSS 问题在 Chrome 中产生了问题，但在 Firefox 中没有

Question

在我的应用程序中，文本由用户输入并显示在具有固定宽度和高度以及 overflow-y:auto 属性的 div 中。 html 看起来像这样:

<div class="description_div scroll-pane jspScrollable" style="overflow-x: hidden; overflow-y: hidden; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 290px; " tabindex="0">
    <div class="jspContainer" style="width: 290px; height: 160px; ">
        <div class="jspPane" style="padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; width: 280px; left: 0px; ">
           <p>This is an original song written and performed by me, Jessica Speziale. I wrote this in early May 2011 :) Let me know what you think!</p>
           <p>Studio is 3 DAYS AWAY!!!  *dies*  I’ll be sending daily studio blogs via my newsletter!  Also, if you sign-up for the newsletter before August 31st, you’ll be entered to win a free copy of my EP!  Woot!! </p>
           <p>Sign up here: http://www.reverbnation.com/page_object/join_mailing_list/artist_868563</p>
        </div>
    </div>
</div>

外层 div 是我指定的，所有其他 div 都是使用 jscrollpane plugin 动态生成的.这是外部 div 的 css:

.description_div{
    float:right;
    width:280px;
    height:160px;
    overflow-y:auto;
    padding:5px;
    margin-left:5px;
}

问题是这在 Firefox 中正确呈现，但在 Chrome 中不正确。这是它在 Firefox 中如何呈现的图片:

这是它在 Chrome 中的呈现方式:

如您所见，在 Firefox 中，它剪切了 div 底部的长 url，以便所有文本都适合 div 的宽度，并添加了一个垂直滚动条。

在Chrome中，它把底部的最后一段文字截掉，只增加了一个水平滚动条。

这是为什么，有解决办法吗？

Answer 1

Firefox 中的默认换行算法可以在正斜杠处插入换行符，而 Chrome 中则不能。但是，您可以将 word-wrap: break-word; 样式添加到外部 div 以强制换行。确保 padding-right 未设置为 0(从您的代码示例中不清楚当前是否设置为 0)，否则由于滚动条，某些文本将不可见。