html - float 和内联 block 元素上的省略号文本溢出

Question

当一系列跨度子项溢出其父容器时，我无法产生省略号效果。我已经将父容器设置为具有省略号的所有必要属性(现在折叠、显示、 overflow hidden ，当然还有作为省略号的文本溢出)，但根据我当前的设置，我的跨度似乎不想在溢出时省略。 ...元素的结构如下

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

虽然所需的效果是省略号，但我看到的是溢出的元素环绕。我的印象是，通过显示为 inline-block 和 nowrap，任何形式的换行都会被阻止，但这里的情况似乎并非如此。这似乎是由于元素 float 造成的，但我一直在寻找一种在这种情况下包含这些 float 的解决方案。这是我目前情况的jsfiddle:https://jsfiddle.net/k91wzsq3/2/ - 下面的截图就是我正在寻找的效果。

任何帮助将不胜感激，提前谢谢您!

Answer 1

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

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

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