Question

我正在努力做一些事情，如果没有一些JS，我相当肯定是不可能的。

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

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

中间项目位于左侧项目内作为内联块。如果左侧项目的文本增加，则将中间项目推到前面。但是，这意味着如果中间项目到达正确项目的边缘，则会截断该项目。
中间项目向右浮动，因此左项目到达时会截断。但是，这意味着中间项目始终位于最右侧，并且不会位于第一项之后。

有没有办法在不诉诸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>

Sass（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
（与下面的代码段相同）

＆＃13;

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

＆＃13;

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

＆＃13;

当容器被截断时，防止内联div包装

1 个答案: