文本溢出浮動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;
    }