次のHTMLとCSS3のルールを使用して、親のdiv

Question

内のアイテムを含むようにボックスモデルを使用して、私は次の基準が守られていることを確認しようとしている：

私は除いて作業基準のすべてを持っています子供が親の幅を超えている項目1については、 です。質問：子供を親の中に閉じ込めるには？

1. ラップしてはならないと常にフル
に表示されなければならないのliアイテムは400ピクセル
2. IMG、ラベル、および通貨のコンテンツすなわち親幅がそのスパン内で垂直
3. 通貨を中心にする必要があります超えることはできません。
4. 通貨は常に ラベルスパンのできるだけ近くに表示する必要があります。
5. ラベルのテキストは2行でクランプし、省略記号は2行を超えるところに表示します。

注：ChromeとSafariウェブキットベースのブラウザでのみ動作する必要があります。

しかし、それは現時点では次のようになります：

それは次のようになります

任意のアイデア？

********************* JS Fiddle example ************************

<ul> 
    <li> 
     <span class="img"></span> 
     <span class="label">Acclaim</span> 
     <span class="currency">(USD 50)</span> 
    </li> 

    <li> 
     <span class="img"></span> 
     <span class="label">Acclaim 1 11 111 1111 11111</span> 
     <span class="currency">(USD 50)</span> 
    </li> 

    <li> 
     <span class="img"></span> 
     <span class="label">Acclaim 1 11 111 1111 11111 2 22222 2222 22222 3 33 333 3333 33333 4 44 444 4444 44444 5 55 555 5555 55555 6 66 666 6666 66666</span> 
     <span class="currency">(USD 50)</span> 
    </li> 
</ul> 


ul { 
    width: 400px; 

    background-color: yellow; 
    padding: 0; 
    margin: 0; 
} 

li { 
    display: -webkit-box; 

    padding-right: 50px; 
} 

.label { 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-box-pack: center; 

    -webkit-line-clamp: 2; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: normal; 
    word-wrap: break-word; 
    line-height: 1.3em; 
    margin-right: 0.2em;  

    background-color: pink;  
} 

.currency { 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-box-pack: center; 

    white-space: nowrap; 

    background-color: lightgreen;  
} 

.img { 
    display: block; 
    width: 40px; 
    height: 40px; 
    margin-right: 0.1em; 

    background-image:url('data:image/png;base64,iVBOR...); 
} 

Answer 1

以下は、価格が広い取得していない提供し、動作します：

http://jsfiddle.net/WDjZ3/4/

私は単に私が他のコンテンツに取り込まスペースを知っていたピクセルにマージン右を変換ラベルよりも大きい場合は、残りの部分の最大幅が追加されます。

.label { 
    margin-right: 3px; 
    max-width: 294px; 
} 

価格や画像が可変幅の場合は、幅を読み取って400ピクセルから削除し、その値を最大幅に加算する必要があります。そうでない場合はマージンが全く価格を行います、それはそれは完全に正確にするために追加する必要がありますので、私は、すべての次元をチェックしていないhttp://jsfiddle.net/WDjZ3/7/

：ここ

は、動的に最大幅を設定するには、JavaScriptを使用した例はありません長いフィット。

私は基本的に他の要素の幅を確認：

function getWidth(el) { 
    return parseInt(window.getComputedStyle(el,null).getPropertyValue("width")); 
} 

私はその後、400ピクセルから、この幅を除去し、maxWidthに設定：

for (var i=0; i<imgs.length; i++) { 
    var width = 400 - (getWidth(imgs[i]) + getWidth(currencies[i])) + "px"; 
    labels[i].style.maxWidth = width; 
} 

Answer 2

私はJavaScriptをせずに作業するために、これを解決してきました。ただし、ChromeとOperaを含む最新のブラウザでのみ動作します。 Safariでは動作しません。最新の仕様に更新されると、Firefoxで動作します。私はおそらくそれをIE10で動作させることができますが、もっと調べなければなりません。省略記号は、ベンダー固有のものと同じようにChrome/Safariでのみ動作します。

デモは、我々はフレキシボックスコンテナとしてリチウムを作り、400ピクセルに設定し、そうフレックス項目は（その後でより）そのサイズに合うようにしようとするすべてのhttp://jsfiddle.net/uLm92/1/

初である。

li { 
    /* make all items inside li as flex items */ 
    display: -webkit-flex; 
    display: flex; 

    height: 40px; 
    max-width: 400px; 
} 

ここで、子アイテムはフレックスアイテムです。ラベルをフィットさせるための鍵は、イメージの設定と価格の変動ではありません。価格に関しては、我々はそれが常に広い40xpになりたい知っているので、私は次のように設定します。

.img { 
    width: 40px; 
    height: 40px; 

    -webkit-flex-basis: 40px; 
    flex-basis: 40px; 
    -webkit-flex-shrink: 0; 
    flex-shrink: 0; 
} 

これは、ID 40ピクセルで好ましく、それを小さくすることはありませんと言っています。

その後、我々はまた、縮小しないように価格を伝えるために、また、匿名ボックス（コンテンツ）を中心にしたい：

.currency { 

    /* make anonymous box vertically centred */ 
    display: -webkit-flex; 
    display: flex; 

    -webkit-align-items: center; 
    align-items: center; 

    /* make sure it never shrinks */ 
    -webkit-flex-shrink: 0; 
    flex-shrink: 0; 
} 

最後に、我々はまた、ラベルのテキストを中央揃えにしたいです。省略記号のハックが必要なので、WebKit用の古いFlexbox構文を使用しました。古いフレキシボックスを使用せず、ラインクランププロパティが動作しない：

.LABEL {

/* need to use old flexbox for line-clamp to work 
    it is a *horrible hack* */ 
display: -webkit-box; 
display: flex; 

-webkit-line-clamp: 2; 
-webkit-box-orient: vertical; 
overflow : hidden; 
text-overflow: ellipsis; 

-webkit-box-pack: center; 
align-items: center; 

}

他の2つの項目が縮小することはありませんように、.LABEL要素が唯一のものですスペースが残っていないとサイズが小さくなります。