Css 在容器被截断时防止内联div被包装

我正在尝试做一些事情，我相当肯定没有一些JS是不可能的

我有三个可变宽度的项目在同一行。右手项总是向左浮动-这是最简单的部分。中间的项目需要直接位于第一个项目之后，如果第一个项目对于给定的空间太宽，则需要截断（带省略号）。问题是中间的项目不应该被截断——如果它到达容器的末尾，第一个项目应该对它进行截断

这里有一个示例，显示了两个变体，每个变体都有我需要的属性：

中间项作为内联块位于左侧项内。如果左侧项目的文本增加，中间项目将被推到其前面。但是，这意味着，如果中间项到达右侧项的边缘，它将被截断

中间的项向右浮动，以便左侧项到达时截断。然而，这意味着中间的项目总是在最右边，而不是坐在第一个项目的后面

有没有办法在不诉诸JS的情况下协调这两个要求？

HTML

---

将

显示：flex是您的选择吗

（与下面的代码片段相同）
。左，
中间的
.对{
填充物：5px；
}
.左{
顺序：1；
弹性：1；
背景：rgba（255255,0.5）；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
.中{
顺序：2；
}
.对{
顺序：3；
背景：rgba（255255,0.8）；
}
.包装纸{
边缘底部：5px；
显示器：flex；
背景：红色；
}



正当
米德勒
虎口浮雕和肘部浮雕同侧前庭；从时间上看，威尼斯之门的边缘，拉奥里特·奥迪奥之前的同侧，从奥迪奥之前到阿尔库之前的同侧。整数
这与“包装-浮动”有什么不同？
<div class="Wrapper -nested">
  <div class="Right">RIGHT</div>
  <div class="Left">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras tempus, risus ut porta venenatis, ipsum ante laoreet odio, id bibendum odio ante et arcu. Integer.
    <span class="Middle">MIDDLE</span>
  </div>
</div>
<div class="Wrapper -floated">
  <div class="Right">RIGHT</div>
  <span class="Middle">MIDDLE</span>
  <div class="Left">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras tempus, risus ut porta venenatis, ipsum ante laoreet odio, id bibendum odio ante et arcu. Integer.
  </div>
</div>

.Left,
.Middle,
.Right {
  padding: 5px;
}

.Left {
  background: desaturate(red, 50);
}

.Middle {
  background: red;
}

.Right {
  background: desaturate(red, 80);;
}

.Wrapper {
  margin-bottom: 5px;

  &.-floated {

    .Left {
      display:block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .Middle,
    .Right {
      float: right
    }
  }


  &.-nested {

    .Left {
      display:block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .Middle {
      display: inline-block;
      padding: 0;
      white-space: nowrap;
    }

    .Right {
      float: right
    }
  }
}