html - 使元素填充剩余的宽度

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>

最重要的是，我试图跨越该行其余部分的元素之前的元素加起来不是一个固定的(大多数黑客对此假设)所以我不能说 calc(100% - 100px)或类似的东西。

我可以用 white-space: pre 来打破这条线和 \n在内容的末尾(我可以修改)。我什至可以转储 <br />在那里 - 我可以在元素中有额外的 HTML - 但我需要组中的最后一个元素一直向右延伸所以 background/border可以应用于它等等。

我希望有多个这样的换行元素，每个元素的起始长度都与组的开头不同。 (这不是表格。)

我可以将样式应用于容器所有的元素，但同样，不能包装各个组。

鉴于我的限制，我不相信这可以完成，但它有可能实现 - 如何实现？

Answer 1

您可以将 float 属性与 white-space 和 BFC 一起使用( block 格式化上下文) :

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.

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>