文本溢出浮动div

Question

我正在尝试创建流畅的布局时遇到问题。 我想知道为什么我不能溢出：隐藏在该站点的左侧菜单文本上工作。

正如您在此处看到的那样，我用蓝色标记了我想包含在左侧菜单div中的文本，尽管该文本溢出并用它向下推网站的其余部分。

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

谢谢你的帮助。

詹姆士。

Answer 1

overflow:hidden;的原因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

这是一个有效的示例，您应该为p 添加一个height并设置 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;
    }