1

2 つの別個の文字列を含む 1 行がfooあり、bar. 文字列全体barをレンダリングして の右側に配置する必要がありますがbox、必要に応じてテキストの 1 行を保持するためにfoo切り詰めることができます。overflow:hidden;幅が 200px の場合のテキスト行。

私の問題はoverflow:hidden;、指定されていない幅の要素に適用する方法がわからないことです。たとえば、barは動的な値です。したがって、ページ Abarは 50px で、ページ Bbarは 150px になります。その結果、widthtofooを使用するようにハードコーディングすることはできませんoverflow:hidden;。

私の例では、テキストが 2 行にまたがっていますが、これは私が望む動作ではありません。テキストは 1 行に収まる必要があります。テキストが大きすぎる場合は、までoverflow:hidden;適用され、1 行に表示されます。foofoobar

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

2 に答える 2

3

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-15T20:38:38.293 に答える