Question

我有一行包含两个单独的字符串，foo和bar。必须呈现整个bar字符串并将其与box的右侧对齐，而foo可以在必要时通过overflow:hidden;截断，以保留一行文字。文本行，如果宽200px。

我的问题是我不确定如何将overflow:hidden;应用于未指定宽度的元素。例如，bar是动态值。因此，对于页面A bar是50px而页面B bar将是150px。因此，我无法将width硬编码为foo以使用overflow:hidden;。

在我的示例中，文本跨越两行，这不是我想要的行为。文本必须放在一行内。如果文字过大，则overflow:hidden;将应用于foo，直到foo和bar出现在一行中。

http://jsfiddle.net/U3Lhg/

.box { overflow:hidden; height:30px; width:200px; background:red; }
.foo { overflow:hidden; display:inline; background:aqua; }
.bar { float:right; background:yellow;}

<div class="box">
    <div class="foo">Cum sociis natoque</div>
    <div class="bar">Lorem ipsum dolor</div>
</div>

Answer 1

使用position: absolute方法而非overflow: hidden方法实现此方法的方法相对简单。

http://jsfiddle.net/U3Lhg/2/

.box {
    border: 5px solid red;
    width: 200px;
    background: red;
    position: relative;
}

.foo {
    background: aqua;

}
.bar {
    background: yellow;
    position: absolute;
    right: 0;
    top: 0;
}

这会满足您的需求，还是有其他原因您尝试使用overflow: hidden？（如果是这样，你将需要JS。）

Answer 2

使用CSS的flex和text-overflow属性

.col {
  display: flex;
  justify-content: space-between;
}
.foo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 5px;
  background: aqua;
}
.bar {
  background: yellow;
  white-space: nowrap;
  padding: 0 5px;
}

<div class="col">
  <div class="foo">
   Some long text Cum sociis natoque Cum sociis natoque Some long text Cum sociis natoque Cum sociis natoque 
  </div>
  <div class="bar">
    Lorem ipsum dolor
  </div>
</div>

隐藏溢出而没有宽度

2 个答案: