Question

我有两个带浮动的div：右：

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

如果两个div的内容太宽而无法容纳在容器中，我想隐藏d2中的任何溢出（它应该是一行不能包裹在第二行）。正如您可能已经猜到的那样，内容的宽度并不固定，如您所知，溢出：如果未指定宽度，则隐藏不起作用。

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

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

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

正如您在上图所示，我有一个会员菜单（会员菜单中的链接不时略有不同 - 通知会员某些活动），也如图所示，会员名称显示在菜单旁边，因为成员名称由成员选择，其宽度从一个成员到另一个成员不等，我担心它会变得太宽而某些成员会导致成员名称显示在下面菜单不在它的左边，所以，如果成员名称太长，我想要隐藏它的一部分（使用overflow：hidden），以便它适合在同一行上停留。

Answer 1

您可以尝试以下方式：

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

但是你已经指明这可能不起作用。

无论如何，这不是我会尝试的，因为当你浮动一个元素时，你需要指定一个宽度。

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

修改：另一种解决方案是将 text-align：right 设置为容器，将显示：内联设置为d1和d2。这样你就可以尝试在不破坏css标准的情况下设计d2。

第三个解决方案：您还可以尝试将MemberName绝对定位在d1或d2（左侧）中。这样你就可以给d1 / d2一个固定的宽度（=漂浮的好），而会员名则会自动从左侧的屏幕上用完。

Answer 2

试试这个：

<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>

关于溢出的问题：隐藏

2 个答案: