html - コンテナ拡張の CSS 強制改行

Question

私が持っているもの:

HTML:

<div class="container">
    <div class="text">
        Some long text
    </div>
    <div class="extendable">
        <img>
    </div>
</div>

CSS:

.container {
    float: right;
    min-width: 10em;
    padding-left: 1em;
    .text {
        padding: 0.3em;
    }
}

すべてのブロックには動的な幅と高さがあります。
http://jsfiddle.net/vZ4eA/

私が欲しいもの：コンテンツが大きくなりすぎる
.textと拡張できないはずです。.container強制改行が必要です。
.extendable一方container、コンテンツが幅を超える場合は大きくする必要があります（正常に動作します）。

score 1 · Accepted Answer

max-widthとともにテキストにa を使用できますnowrap

.text{
padding: .3em;
border: 1px solid red;
max-width: 200px;
word-break: break-all;
display: block;

}

編集：

以下のコメントのいずれかに対応するには、コンテナーの動的な幅を操作するためにmax-width、おそらく動的な値である必要があります。javascriptまたはでこの動作を簡単に実装できますjQuery

jQuery

このプラグインをチェックして、サイズ変更を処理することをお勧めしますdiv

$("#div").resize(function(e){
    $(".text").css({"max-width" : $(this).css("max-width") });
});

score 1 · Accepted Answer

固定幅を設定してから使用する必要があり.textますword-break:break-all;

jQuery を使用すると、の幅をの幅に設定でき.textます.extendable。

 var exWidth = $('.extendable').css('width');
 $('.text').css('width', exWidth);

編集：CSSのみ

.textの中に配置してみてください.extendable。

ここを参照してください: http://jsfiddle.net/vZ4eA/18/

編集 2: CSS:

この回答https://stackoverflow.com/a/7231607/1399670の助けを借りて、要件に合わせてフィドルを更新しました。

score 0 · Accepted Answer

.container のサイズが変更されると、おそらく .text の最大幅を動的に更新する必要があります。具体的には、ページの読み込み時とビューポートのサイズ変更時です。jQuery を使用してこれを行うことができます。

score 0 · Accepted Answer

ここで適用できると思われる唯一の方法は、.text に max-width を設定することです

4 に答える 4