-6

問題の解決策を Web で見つけることができません。私の問題は次のとおりです。幅が異なる div#container という 3 つの要素があるとします。コンテナーには、幅が不明な div#text と固定幅の div#img の 2 つの要素が含まれています。両方の要素がインラインです。

<div id="container" style="width:auto">
    <div id="text"> some varying text here... </div>
    <div id="img" style="width: 10px; background: url(img.png)">
</div>

テキストのスタイリングは次の場所にあります。

#text { width:auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

ここの画像で示されているように、画像の位置をテキストの近くに配置したいのですが、せいぜいコンテナの右端の境界です。

javascript を使用せずにこれを達成する方法はありますか? ただし、コンテナーはドキュメントに動的に追加されるため、幅の計算は使用できません。

前もって感謝します

4

2 に答える 2

0

これは私があなたの要求に近づくのと同じくらいでした:

Fiddle

残念ながら、 の動作によりtext-overflow: ellipsis、最大幅を設定せずに目的の動作を実現することは非常に困難です。そして、画像は短いテキストブロックの隣にはありません. オプションはtext-align: right、私の例でわかるようになります。

テキストを右側に配置する方がはるかに簡単です。 Fiddle

于 2013-08-01T15:09:19.807 に答える