'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（从您的代码示例中不清楚它当前是否是），否则由于滚动条，某些文本将不可见。

Answer 2

在溢出时尝试完整：自动。这与 -y 或 -x 无关，除非您需要不同的设置。