html - 溢出隐藏没有宽度

Question

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

我的问题是我不确定如何应用于overflow:hidden;未指定宽度的元素。例如，bar是一个动态值。因此，页面 Abar为 50px，而页面 Bbar为 150px。因此，我无法硬编码 awidth以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>