Question

我一直在为我的问题寻找解决方案很长一段时间，我似乎找不到任何类似的答案。

我要做的是我在文本块的行中放置内联跨度（至少300px宽），我希望它们扩展到它们之前，或者他们的行中的内容到达父填充。

我可以看到这有点难以理解，所以我有 this simple graphic 。

另外，我有 this Codepen 。我已尝试将以下内容应用于我的范围：

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

但宽度：100％使用父宽度，而不是可用宽度。我不介意使用jQuery，但我现在正试图找到纯CSS分辨率。

我真的希望自己明白 - 英语不是我的第一语言。

提前致谢;）

Answer 1

只使用CSS，您可以利用flex属性。但是，这需要您更改标记以分隔各行。这是您的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>

Answer 2

感谢 jkris ，他给了我一个关于使用 flex 属性的提示，我设法通过设置

来完成我想做的事情

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

在父元素上，并设置

flex-grow: 1;

关于填充元素。 Working Codepen here。感谢：！）

CSS跨越文本 - 适合宽度/对齐

2 个答案: