文本溢出浮动div

Question

我试图创建一个流畅的布局问题。我想知道为什么我无法溢出：隐藏在本网站的左侧菜单文本上工作。

正如你在这里看到的那样，我用蓝色标记了我想要包含在左侧菜单div中的文本，尽管它溢出并用它推倒网站的其余部分。

请在此处查看JS Bin：http://jsbin.com/OcoJEpe/2/edit?html,css,output

感谢您的帮助。

詹姆斯。

Answer 1

overflow:hidden;无法正常工作的原因是因为left-menu div因文本大小而扩展。您没有限制left-menu高度的代码（css或html）。有很多方法可以解决这个问题，但基本上你需要告诉div只能达到一定的高度。

Answer 2

该元素上的height正在使用其默认值auto，因此它会展开以适应其内容。

您需要指定一些高度：

  #left-menu{height:200px;} //OR SOME NON-AUTO HEIGHT

Answer 3

您需要在左侧菜单中添加高度，请查看此jsfiddle

Answer 4

这是一个有效的示例，您应该

添加一个height用于p和设置 overflow:hidden。

这是html

<p id="height"><span>This text is overflowing parent div...</span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a odio ac nulla aliquet molestie. Cras aliquet metus eget vehicula vulputate. Donec eget nisl sit amet quam fringilla molestie. Vivamus elementum non justo quis consequat. Etiam quis quam eu nisi cursus aliquet eu et arcu.
    </p>

和css

p#height{
      height:30px;
      background:red;
      overflow:hidden;
    }