css - 文本溢出浮动 div

Question

我尝试创建的流体布局存在问题。我想知道为什么我不能溢出：隐藏在这个站点的左侧菜单文本上工作。

正如您在此处看到的，我已将我希望包含在左侧菜单 div 中的文本标记为蓝色，尽管它会溢出并将站点的其余部分向下推。

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

谢谢你的帮助。

詹姆士。

Answer 1

The reason that overflow:hidden; is not working is because your left-menu div is expanding due to the size of the text. You have no code (css or html) that is restricting the height of your left-menu. There are a number of ways to solve this problem, but essentially you need to tell the div to only go to a certain height.

Answer 2

你height在那个元素上使用它的默认值，auto所以它会扩展以适应它的内容。

您需要指定一些高度：

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

Answer 3

您需要在左侧菜单中添加高度，看看这个jsfiddle

Answer 4

这是一个工作示例，您应该只添加一个heightfor p 和set 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;
    }