如何在包裹后减少跨度到必要的尺寸

Question

我在固定大小<span>中有三个<div>，其中中间跨度有时会将其内容包装到第二行。如果文本没有中断，则内容通常不会填满整个<div>。因此，下面代码中的黑色背景是可见的。

但是，如果中间<span>包裹，它将延伸到可能的最大尺寸，在其内容和第三个跨度的内容之间留下很大的差距。

手动插入<br/>可以解决此问题但不方便，因为<div>的固定宽度可能会发生变化。

是否可以使用CSS重现此行为？

jsfiddle中的代码：

＆＃13;

＆＃13;

.background {
  width: 300px;
  background: #000;
}

.sup {
  display: table;
}

.s {
  display: table-cell;
}

.s1 {
  background: #f0f;
}

.s2 {
  background: #ff0;
}

.s3 {
  background: #0ff;
}

＆＃13;

<!-- implemented behaviour -->
<div class="background">
  <div class="sup">
    <span class="s s1">Starttext</span>
    <span class="s s2">A text which can break because it is long.</span>
    <span class="s s3">Endtext</span>
  </div>
</div>
<br/>
<!-- wanted behaviour -->
<div class="background">
  <div class="sup">
    <span class="s s1">Starttext</span>
    <span class="s s2">A text which can break<br/> because it is long.</span>
    <span class="s s3">Endtext</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;