Cross-browser CSS text-overflow with floating elements and fluid text width

Problem

The scenario I have here: http://jsfiddle.net/b2xLgkqu/4/ (approximate minimal reproduction of my actual usage scenario)

Basically, I have a base element with width: 100% which has three children - leftside segment, rightside segment and main text. The left and right side have a known width in rems, but it's completely fluid otherwise. The text-overflow works nicely in Chrome, IE11 and Chrome for Android, but not on the latest Firefox. I'm looking for something that would make it work there too, without breaking any of the other browsers. (I also can't use workarounds like hiding the main text with a background-color on the side elements due to the containing element having semitransparent background color, and I'd like to keep it that way.)

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.head {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
.left, .right { 
  width: 5rem;
  padding: 0 0.1rem;
  position: relative;
  z-index: 1;
}
.left {
  float: left;
}
.right {
  float: right;
}
span {
  position: relative;
  z-index: 0;
}
<div class="head">
  <div class="left">FOO BAR</div>
  <div class="right">FOO BAR</div>
  <span>
    long text
    <span style="color: red">that</span>
    should end up
    <b>wrapping with</b>
    text overflow ellipsis blah blah more blogging here
  </span>
</div>

Problem courtesy of: Daiz

Solution

You set some styles to .head but you should set them to .head > span instead:

.head > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.left, .right { 
  width: 5rem;
  padding: 0 0.1rem;
}
.left {
  float: left;
}
.right {
  float: right;
}
.head > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<div class="head">
  <div class="left">FOO BAR</div>
  <div class="right">FOO BAR</div>
  <span>
    long text
    <span style="color: red">that</span>
    should end up
    <b>wrapping with</b>
    text overflow ellipsis blah blah more blogging here
  </span>
</div>

Also note it needs display: block in order to interact like you want with the floating elements.

Solution courtesy of: Oriol

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.