关于溢出的问题：隐藏

我有两个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

关于溢出的问题：隐藏

回答

相关问题