css - 关于溢出: hidden的一个问题

Question

我有两个带有 float: right 的 div:

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

如果两个 div 的内容太宽而无法容纳在它们的容器中，我想隐藏 d2 中的任何溢出(所有内容都应该是一行，不能在第二行换行)。您可能已经猜到，内容的宽度不是固定的，并且如您所知，如果未指定宽度，overflow: hidden 将不起作用。

提前感谢您的任何建议...

编辑:在阅读了 tharkun 的评论后，我想我可能应该更清楚地说明我想要实现的目标，所以我创建了这个草稿:

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

如您在上图中所见，我有一个成员(member)菜单(成员(member)菜单中的链接有时会略有不同 - 以通知成员(member)一些事件)，也如您在图片中所见，成员(member)名称显示在菜单旁边，因为成员名称是由成员选择的，它的宽度因成员而异，我担心对于某些成员来说它可能变得太宽，这会导致成员名称显示在菜单不在它的左边，所以，如果成员名称太长，我想隐藏它的一部分(使用 overflow: hidden)，以便它适合停留在同一行。

Answer 1

你可以尝试这样的事情:

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

但是您已经指定这可能行不通。

无论如何，我永远不会尝试这样做，因为当您 float 元素时，您需要指定一个宽度。

另一种解决方案是使用 javascript 动态计算和设置宽度。

编辑:另一种解决方案是将text-align:right 设置为您的容器，并将display:inline 设置为d1 和d2。这样您就可以在不破坏 css 标准的情况下尝试设置 d2 的样式。

第三种解决方案:您还可以尝试将 MemberName absolute 定位在 d1 或 d2(左边的那个)内。这样你就可以给 d1/d2 一个固定的宽度(=适合 float )并且 MemberName 会自动从左侧的屏幕上跑出来。