文本之間的CSS跨度 - 適合寬度/對齊

Question

我一直在尋找我的問題的分辨率很長一段時間，我似乎無法找到任何類似的答案。

我想要做的是我將內聯跨度（至少300px寬）之間的文本塊中的行，我希望他們擴大，直到他們，或他們的行內容達到父母填充。

我可以看到這可以有點難以理解，所以我有this simple graphic。我有this Codepen。 我試着將下面我跨度：

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

但寬度：100％使用母公司的寬度，不可寬度。我不介意使用jQuery，但我現在試圖找到純粹的CSS分辨率。

我真的很希望自己清楚 - 英語不是我的第一語言。

在此先感謝;）

Answer 1

由於jkris，誰給我一個提示，關於使用柔性財產，我已經成功地完成我希望通過父元素上設置

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

您的標記看起來像這樣：

<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>