關於溢出的問題：隱藏

我有兩個div與浮法：右：關於溢出的問題：隱藏

<div id="container" style="width:760px"> 
    <div id="d1" style="float:right;"></div> 
    <div id="d2" style="float:right;"></div> 
</div>

我想隱藏任何溢出在D2如果雙方的div的內容過於廣泛，以適應其容器（這一切應該是一行不能包含在第二行）。正如您可能已經猜到的那樣，內容的寬度並不固定，正如您所知溢出：如果未指定寬度，則隱藏不起作用。

在此先感謝您的任何建議...

編輯：閱讀tharkun的評論後，我想我也許應該更清楚我想要實現，所以我創造了這個草案：

http://www.waleedeissa.com/temp/css-problem.gif

正如你在上面的圖片中看到的，我有一個成員菜單（成員菜單中的鏈接會不時地略有不同 - 通知會員某些事件），也如圖所示，會員名稱顯示在菜單旁邊，因爲會員名稱由t選擇他的成員從一個成員到另一個成員的寬度有所不同，我擔心某些成員可能會變得太寬，會導致成員名稱顯示在菜單下方而不是左側，因此，如果成員名稱太長我想隱藏它的一部分（使用overflow：hidden），以便它適合停留在同一行上。

來源

2009-02-14 Waleed Eissa

也許，如果你提供有關實際的現實生活問題的更多信息，我們可能會出主意。這聽起來對我來說太理論了。我從來沒有在現實生活中遇到過這樣的問題。 – markus 2009-02-14 13:19:15

重新考慮你的設計的時候，或者只是接受那些長名字可能會被包裹，因爲我看不到如何做到這一點。 – cletus 2009-02-14 23:36:27

你可以嘗試這樣的：

#d2 { 
    height: 1em; 
    overflow: hidden; 
}

但是你已經指定了，可能無法正常工作。

無論如何，這不是我會嘗試的，因爲當你浮動一個元素時，你需要指定一個寬度。

另一種解決方案是使用javascript來動態計算和設置寬度。

編輯：另一個解決方案是設置的text-align：右您的容器和顯示：內聯到D1和D2。這樣你可以嘗試在不違反CSS標準的情況下設計d2。

第三種解決方案：您也可以嘗試將MemberName絕對定位在d1或d2（左邊）中。這樣你可以給d1/d2一個固定的寬度（=對浮點數有好處），MemberName會自動在左邊的屏幕上運行。

來源

2009-02-14 13:23:53 jeroen

非常感謝您的回答，我想我應該更具體一些，實際上它全部是一行（就顯示而言），但是d1（右側的那一行）包含左側浮動的鏈接，以便擁有頂部和底部填充和背景圖像。 – 2009-02-14 14:51:04

試試這個：

<html> 
<head> 
    <title>Layout</title> 
    <style type="text/css"> 
    .container { border: 1px solid black; overflow: hidden; white-space: nowrap; text-align: right; } 
    .container div { display: inline; } 
    .d1 { background: yellow; } 
    .d2 { background: #DDD; } 
    </style> 
</head> 
<body> 
<table> 
<div class="container" style="width:300px"> 
    <div class="d1">this is the content of the first div</div> 
    <div class="d2">this is the content of the second div</div> 
</div> 
<div class="container" style="width:300px"> 
    <div class="d1">first div</div> 
    <div class="d2">second div</div> 
</div> 
</body> 
</html>

來源

2009-02-14 13:27:58 cletus

關於溢出的問題：隱藏

回答

相關問題