css - 防止内联 div 在容器被截断时换行

Question

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

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

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

1. 中间项作为内联 block 位于左侧项内。如果左侧元素的文本增加，则中间元素被推到它前面。然而，这意味着如果中间项到达右侧项的边缘，则中间项将被截断。

2. 中间项向右浮动，以便左侧项在到达时截断。然而，这意味着中间项始终位于最右侧，而不是紧跟在第一项之后。

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

HTML

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

萨斯 (scss)

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

Answer 1

display:flex; 是您的选择吗？ http://codepen.io/anon/pen/bNvjNj
(与下面的片段相同)

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

.Left {
  order:1;
  flex:1;
  background: rgba(255,255,255,0.5);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.Middle {
order:2;

}

.Right {
  order:3;
  background: rgba(255,255,255,0.8);
}

.Wrapper {
  margin-bottom: 5px;
  display:flex;
  background:red;
}

<br/><br/><div class="Wrapper">
  <div class="Right">RIGHT</div>
  <div class="Middle">MIDDLEEEEEEEEEEEEEEE</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.
  </div>
</div>