CSS问题-水平滚动条隐藏内容

发布于 2024-12-02 13:54:16 字数 431 浏览 0 评论 0原文

我对此有疑问...因为它给了我滚动条，但高度保持不变，因此文本被滚动条覆盖...

<td class='messages'><div style='border:0px;padding:0px;width:100%;overflow-x:auto;background-color:#66C2FF;height:' class='messages'>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
</td>

提前致谢！

原文

I have a problem with this one... because it gives me the scrollbar but the height remains the same so the text is covered by the scroll bar...

<td class='messages'><div style='border:0px;padding:0px;width:100%;overflow-x:auto;background-color:#66C2FF;height:' class='messages'>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
</td>

Thanks in advance!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乖乖兔^ω^ 2024-12-09 13:54:16

将您的 CSS 移至外部样式表，并使用条件注释仅针对您遇到问题的浏览器（我使用低于或等于 IE7，因为我无法在 IE8 中复制）。我在底部添加了填充。

实例： http://jsfiddle.net/tw16/Vx9HZ/

将条件注释放在 < code> 像这样：

<head>
    <!--[if lte IE 7]>
        <style>div.messages {padding:0 0 22px;}</style>
    <![endif]-->
</head>

CSS： 移至外部样式表。

div.messages {
    border:0px;
    padding:0 0 0;
    width:100%;
    overflow-x:auto;
    background-color:#66C2FF;
}

HTML： 去掉样式。

<td class='messages'>
    <div class='messages'>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
    </div>
</td>

Move your css to an external style sheet and use a conditional comment to target just the browsers you are having a problem with (I have used lower than or equal to IE7 as I cannot replicate in IE8). I have added padding to the bottom.

Live example: http://jsfiddle.net/tw16/Vx9HZ/

Put the conditional comment in the <head> like this:

<head>
    <!--[if lte IE 7]>
        <style>div.messages {padding:0 0 22px;}</style>
    <![endif]-->
</head>

CSS: Moved to external style sheet.

div.messages {
    border:0px;
    padding:0 0 0;
    width:100%;
    overflow-x:auto;
    background-color:#66C2FF;
}

HTML: Stripped out styling.

<td class='messages'>
    <div class='messages'>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
    </div>
</td>

回复收藏 0 原文

李白 2024-12-09 13:54:16

如果我理解正确，那么以下内容应该可以解决您的问题，并且始终断线以适应指定的宽度。将其放入您的 style="" 中。

word-wrap: break-word

附言。另外，您有“高度：”，但没有指定高度。

If I understand you correctly then the following should solve your issue and ALWAYS break a line to accommodate the width if specified. Put this in your style="".

word-wrap: break-word

PS. Also, you have "height:" with no height specified.

回复收藏 0 原文

葵雨 2024-12-09 13:54:16

这对我有用：

<html>
  <body>
    <td class='messages'>
      <div style='border:0px;padding:0px;width:100%;overflow-x:auto;background-color:#66C2FF; height= 50PX; class=messages;'>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
      </div>
   </td>
  </body>
</html>

我为 div 指定了一个 height ，该高度足以显示文本和滚动条。 =）希望这有帮助。

This works for me:

<html>
  <body>
    <td class='messages'>
      <div style='border:0px;padding:0px;width:100%;overflow-x:auto;background-color:#66C2FF; height= 50PX; class=messages;'>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
      </div>
   </td>
  </body>
</html>

I specified a height for the div that was big enough to show the text and the scroll bar. =) Hope this helps.

回复收藏 0 原文

~没有更多了~