具有浮动元素和流畅文本宽度的跨​​浏览器CSS文本溢出

Question

我在这里的场景：http://jsfiddle.net/b2xLgkqu/4/（近似于我实际使用场景的最小再现）

基本上，我有一个width: 100%的基本元素，它有三个孩子 - 左侧段，右侧段和主要文本。左侧和右侧具有已知的宽度，但是它在其他方面完全是流体。 text-overflow适用于Chrome，IE11和Chrome for Android，但不适用于最新的Firefox。我正在寻找可以使其在那里工作的东西，而不会破坏任何其他浏览器。 （由于包含半透明背景颜色的元素，我也不能使用像侧面元素隐藏主文本一样的变通方法，我希望保持这种方式。）

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您将某些样式设置为.head，但您应将其设置为.head > span：

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

另请注意，它需要display: block才能以您想要的方式与浮动元素进行交互。