CSS 问题“overflow-y:auto”这会在 Chrome 中产生问题，但在 Firefox 中不会产生问题
在我的应用中，文本由用户输入，并显示在具有固定宽度和高度以及 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 动态生成的插件。这是外部 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中，它会剪掉底部的最后一段文字，只添加水平滚动条。
这是为什么，有解决办法吗？
In my app, text is inputted by the user and is displayed within a div with a fixed width and height and a overflow-y:auto property. The html looks like this:
<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>
The outer div is the one I specify, and all of the other divs are dynamically generated with the jscrollpane plugin. Here is the css for the outer div:
.description_div{
float:right;
width:280px;
height:160px;
overflow-y:auto;
padding:5px;
margin-left:5px;
}
The problem is that this renders correctly in Firefox but not in Chrome. Here is a pic of how it is rendered in Firefox:
and here is how it is rendered in Chrome:
As you can see, in Firefox it cuts up the long url at the bottom of the div so that all the text fits within the width of the div, and a vertical scroll bar is added.
In Chrome, it cuts off the last paragraph of text on the bottom and only adds a horizontal scroll bar.
Why is this, and is there a solution to remedy this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
Firefox 中的默认换行算法可以在正斜杠处插入换行符，而 Chrome 则不能。不过，您可以将
word-wrap: break-word;样式添加到外部 div 以强制换行。确保padding-right未设置为 0（从您的代码示例中不清楚当前是否设置为 0），否则某些文本将因滚动条而不可见。The default wrapping algorithm in Firefox can insert line breaks at forward slashes, in Chrome it doesn't. You can add
word-wrap: break-word;style to the outer div to force wrapping however. Make sure thatpadding-rightisn't set to 0 (from your code example it isn't clear whether it currently is) or some text will be invisible because of the scrollbar.尝试完整的溢出：自动。除非您需要不同的设置，否则 -y 或 -x 都无关紧要。
Try a full on overflow:auto. None of this -y or -x business, unless you need to have different settings.