CSS間のテキストの幅に合わせて調整する/正当化

Question

私の問題の解決策はかなりの間探し求めていましたが、私は同じような答えは見つけられません。

インラインスパン（少なくとも300ピクセル幅）をテキストブロック内の行の中に配置していますが、その行またはその行の内容まで展開する必要があります親のパディングに達する。

私はこれが少し理解することができないことがわかりますので、私はthis simple graphicを持っています。

また、私はthis Codepenです。 は、私は私のスパンに、次の適用しようとしました：

display: inline-block; 
min-width: 300px; 
width: 100%; 
height: 5px; 

しかし幅：100％は、親幅、利用できない幅を使用しています。私はjQueryを使用しても構いませんが、今は純粋なCSS解像度を探しています。

私は本当に自分を明確にしたいと思います - 英語は私の母国語ではありません。事前に

感謝;）

Answer 1

おかげで、私はに管理しています私は親要素の

display: inline-flex; 
flex-wrap: wrap; 
align-content: flex-start; 

を設定し、

を設定することで、やりたいことを達成フィラー要素上の

flex-grow: 1; 

。 Working Codepen here。ありがとう！:)

Answer 2

だけCSSを使用して、あなたはフレックスプロパティに活用することができます。ただし、個々の行を区切るためにマークアップを変更する必要があります。ここにあなたのcodepenの修正版です：https://codepen.io/anon/pen/BdVEbZ

あなたのマークアップはそうのようになります。私は、フレックスプロパティを使用する方法についてのヒントを与えたjkrisへ

<div class="karta"> 
<span class="line"> 
    Text text text text  
</span> 

<span class="line"> 
<span class="filler"></span> text tt 
</span> 
<span class="line"> 
    texttextte <span class="filler"></span> 
</span> 
texttexttexttexttext 
<span class="line"> 
    <span class="filler"></span> . 
</span> 
</div>