How to reduce span to necessary size after wrap

Question

I have three <span>s in a fixed-size <div>, where the middle span will sometimes wrap its content into a second line. If the text doesn't break, the contents will usually not fill the whole <div>. Thus, the black background in the code below is visible.

However, if the middle <span> wraps, it will stretch to the maximum possible size leaving a large gap between its content and the content of the third span.

Manually inserting a <br/> resolves this issue but is not convenient, because the fixed-width of the <div> might change.

Is it possible to reproduce this behaviour with CSS?

---

Code in jsfiddle:

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

.sup {
  display: table;
}

.s {
  display: table-cell;
}

.s1 {
  background: #f0f;
}

.s2 {
  background: #ff0;
}

.s3 {
  background: #0ff;
}

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