2013-10-22 168 views
0

我有一個流體佈局的問題,我嘗試創建。我想知道爲什麼我無法獲得溢出:隱藏在本網站的左側菜單文本上。文本溢出浮動div

正如你在這裏看到的那樣,我用藍色標記了我想要包含在左側菜單div中的文本,儘管它溢出並將其餘的網站推下去。

請在這裏看到一個JS斌:http://jsbin.com/OcoJEpe/2/edit?html,css,output

感謝您的幫助。

James。

+0

?有關什麼高度? – DaniP

+1

而且,輸出應該是什麼?要溢出,內容必須大於容器。你的容器沒有限制。 –

+0

是的,沒錯,我希望隱藏在#左側菜單中的文本,以便基本上看不到紅色。 (#左側菜單文字向下推動頁面) –

回答

0

overflow:hidden;不能正常工作的原因是因爲您的left-menu div由於文本的大小而正在擴展。您沒有限制您的left-menu高度的代碼(css或html)。有很多方法可以解決這個問題,但基本上你需要告訴div只能達到一定的高度。

0

您在該元素上的height正在使用其默認值auto,因此它會展開以容納其內容。

你需要指定一些高度:

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

這是一個工作的例子,你應該只添加一個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; 
    } 
你想隱藏僅在#左側菜單中的溢出