时间戳

首页 > 解决方案 > 浮动和内联块元素上的省略号文本溢出

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

问题描述

当一系列跨度子级溢出其父容器时，我无法产生省略号效果。我已经将父容器设置为具有省略号的所有必要属性（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/ - 下面的截图是我正在寻找的效果。

这是期望的结果

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

标签： htmlcssfrontendcss-floatoverflow

解决方案

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

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

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

推荐阅读