使用'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，所有其他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底部的长网址，以便所有文本都适合div的宽度，并添加垂直滚动条。

在Chrome中，它会切断底部文本的最后一段，只添加一个水平滚动条。

为什么会这样，是否有解决方案来解决这个问题？

Answer 1

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

Answer 2

尝试完全溢出：auto。这些-y或-x业务都不是，除非您需要进行不同的设置。