Question

我试图将我的顶级句子（<p>geornvgowegnoewpgnerognm</p>）隐藏在div中，我不确定这是否可行，但有一点可以确定overflow-y样式是没有按预期工作，或者我正在做一些非常错误的事情。基本上我希望没有滚动条，我得到一个水平的，即使Mozilla说它应该水平隐藏内容。我正在使用Firefox 28测试版，但这不重要吗？

这是代码，

<html>
<head>  
</head> 
<body>
<style type = "text/css">
#div_1
{
    overflow-y:hidden;
    height: 100px;
    width: 100px;
    top: 50%;
    left: 50%;
    background-color: white;
}
body
{
    background-color: black;
}
p
{
    font-color: blue;
    font-size: 20px;
    margin: 0 auto;
}
</style>
<div id = "div_1">
<p>geornvgowegnoewpgnerognm</p>
<p>eornvgowegnoewpgnerognm</p>
<p>ornvgowegnoewpgnerognm</p>
<p>rnvgowegnoewpgnerognm</p>
<p>nvgowegnoewpgnerognm</p>
<p>vgowegnoewpgnerognm</p>
<p>gowegnoewpgnerognm</p>
<p>owegnoewpgnerognm</p>
<p>wegnoewpgnerognm</p>
<p>egnoewpgnerognm</p>
<p>gnoewpgnerognm</p>
<p>noewpgnerognm</p>
<p>oewpgnerognm</p>
<p>ewpgnerognm</p>
<p>wpgnerognm</p>
<p>pgnerognm</p>
<p>gnerognm</p>
<p>nerognm</p>
</div>
</body>
</html>

Answer 1

要摆脱水平滚动条，请使用overflow-x：

overflow-x: hidden;

overflow-y，隐藏y方向的溢出。如在向上和向下，这将隐藏垂直滚动条。

Answer 2

另一种方法是

1）在视觉上隐藏段落标记。它会保留div中的空间，就像它在那里一样，只是不可见。

#div_1 p:first-child {visibility: hidden;}

或2）直观地删除段落标记。它看起来好像不存在，所有其他段落标签都会向上移动。

#div_1 p:first-child {display: none;}

CSS overflow-y不像宣传的那样工作吗？

2 个答案: