浮动和内联块元素上的省略号文本溢出

Question

当一系列 span 子项溢出其父容器时，我无法产生省略号效果。我已经将父容器设置为具有省略号的所有必要属性（nowrap、显示、隐藏溢出，当然还有作为省略号的文本溢出），但是对于我当前的设置，我的跨度似乎不想在溢出时变成椭圆. ...元素的结构如下

<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 在这种情况下这些浮动的解决方案。这是我当前情况的 jsfiddle：https://jsfiddle.net/k91wzsq3/2/ - 下面的屏幕截图是我正在寻找的效果。

任何帮助将不胜感激，提前致谢！

Answer 1

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

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

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

浮动和内联块元素上的省略号文本溢出

Ellipsis Text Overflow on Float and Inline Block Elements

html

css

frontend

overflow

css-float