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

【问题标题】：Ellipsis Text Overflow on Float and Inline Block Elements浮动和内联块元素上的省略号文本溢出
【发布时间】：2020-05-22 03:44:56
【问题描述】：

当一系列跨度子级溢出其父容器时，我无法产生省略号效果。我已经将父容器设置为具有省略号的所有必要属性（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 会阻止任何类型的换行，但这里似乎并非如此。这似乎是由于浮动元素，但我一直在寻找的是在这种情况下包含这些浮动的解决方案。这是我目前情况的一个jsfiddle：https://jsfiddle.net/k91wzsq3/2/ - 下面的截图是我正在寻找的效果。

任何帮助将不胜感激，在此先感谢您！

【问题讨论】：

标签： html css frontend css-float overflow

【解决方案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/

【讨论】：