浮动和嵌入式块元素上的省略号文本溢出

Question

当一系列span子代溢出其父容器时，我很难产生省略号效果。我已将父容器设置为具有省略号的所有必要属性（nowrap，display，隐藏的溢出，当然还有文本溢出为省略号），但是在当前设置下，我的跨度似乎不想在溢出时椭圆化。...元素的结构是这样的

<div class="outer">
<span class="genre">Adventure</span>
<span class="operator">OR</span>
<span class="genre"> Comedy</span>
</div>

...以及相应的CSS：

.outer {
    max-width: 90px;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    text-overflow: ellipsis;
}

.operator {
  width: 20px;
  height: 22px;
  float: left;
}
.genre {
  float: left;
}

虽然所需的效果是省略号，但我看到的是溢出的元素环绕。我的印象是，通过以行内代码块和nowrap的形式显示，可以防止任何类型的换行，但是在这里似乎并非如此。这似乎是由于浮动元素所致，但是我一直在寻找的是这种情况下includes这些浮动的解决方案。这是我目前的情况：https://jsfiddle.net/k91wzsq3/2/-下面的屏幕快照是我想要的效果。

非常感谢您的帮助，在此先谢谢您！

Answer 1

在这种情况下，您不需要使用float属性，它只会弄乱您的元素。您只需要告诉.outer元素它将内联，就像您所做的一样，但是通过添加浮点数，它破坏了一切。您只需要CSS

.outer {
  max-width: 90px;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  text-overflow: ellipsis;
}

在这里拨https://jsfiddle.net/zgranda/0Ls6fw4j/14/