エレメントを幅の残りの部分に塗りつぶす

Question

私は、個々のアイテムにスタイルを付け加えることができるシステムで作業していますが、全体的にアイテムのサブセットをグループ化する方法はありませんセット。 （だから私は任意の要素でこれらのサブセット/グループをラップすることはできません。）

それは、これに、本質的に沸く：その上で

<span>a</span><span>b</span><span>c</span><span class="rest"></span> 
<!-- There's not actually a line break here --> 
<span>a</span><span>b</span><span>c</span><span class="rest"></span> 

を、私が作るしようとしている1前のアイテム残りの行にまたがって固定する（これはほとんどの場合はこれを前提にしている）ので、私はcalc(100% - 100px)などとは言いません。

コンテンツの末尾にwhite-space: preと\nと改行することができます（変更可能です）。私はちょうどそこに<br />をダンプすることができます - 私はアイテム内に余分なHTMLを持つことができます - しかし、私はグループの最後のアイテムが右に繋がるようにする必要があります。

私は、これらの改行要素が複数あり、それぞれがグループの先頭から異なる長さで開始したいと考えています。 （これはテーブルではありません。）

は、私はすべての要素がしているコンテナにスタイルを適用することができますが、再び、個々のグループをラップすることはできません。

私はこれが私の制約を踏まえて行うことができるとは確信していませんが、それは可能ですか？

Answer 1

あなたはwhite-spaceとBFC（ブロック整形コンテキスト）でfloatプロパティを使用することができ：

ブロックフォーマッティングコンテキストは、Webページの視覚的なCSSのレンダリングの一部です。ブロックボックスのレイアウトが発生し、浮動小数点数が相互に作用する領域です。

span { 
 
    float:left; 
 
    white-space:pre-wrap;/* remove this to get the purpose */ 
 
} 
 
.rest { 
 
    background:gray;/* see me */ 
 
    float:none;/* prepare BFC */ 
 
    display:block; 
 
    overflow:hidden; 
 
    min-height:1.2em;/* if empty, it needs some heights */ 
 
    margin-bottom:0.2em;/* or add it to height value */ 
 
}

<span>a</span><span>b</span><span>c</span><span class="rest"></span> 
 
<!-- There's not actually a line break here --> 
 
<span>a</span><span>b</span><span>c</span><span class="rest"></span> 
 
<span> whatever </span><span> else </span><span> what </span><span class="rest"></span>