没有宽度的隐藏溢出

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

我的问题是，我不确定如何将overflow:hidden;应用到未指定宽度的元素。例如，bar是一个动态值。因此对于页面A bar是50px而页面B为0123px将是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>

来源

2013-10-15 Jon

我有点困惑...所以，你想酒吧总是有它的全长或文本和foo隐藏，如果需要？你还想在哪里隐藏它？有没有继续/在酒吧文字下面？ – Kierchon

@Kierchon是的，你是对的。我想'bar'在任何时候都有它的全部文本。 'foo'应该是'overflow：hidden;'应用于它。我想''foo'从'bar'隐藏15px。如果'foo'的隐藏部分不会在'bar'的文本后面继续，那最好。 – Jon

有实现这个使用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。）

来源

2013-10-15 20:38:38 Nate

没有宽度的隐藏溢出

回答

相关问题