html - 具有多个跨度的 div 上的文本溢出省略号

Question

我的自动完成插件的下拉建议结构如下

<div>
    <svg>//some things here</svg>
    <span>My long text</span>
    <span>Some short text</span>
</div>

div 具有以下 CSS 属性 -

display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%

跨度具有以下属性-

float: left;

我无法理解哪里出了问题，到目前为止，我已经尝试了几乎所有在类似问题中回答过的 SO 解决方案。绝望的呼喊!

更新:http://codepen.io/shreeshkatyayan/pen/wzPYvO CSS 结构 - 由于显而易见的原因无法正常工作。

Answer 1

这里有两个例子可能会有帮助。

将溢出添加到 span 而不是 div，这将为每个 span 提供省略号属性。

div.one {
display: inline-block;
width: 100%;
}

div.one span {
float: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 75px;
margin-right: 10px;
}

或者为 div 提供省略号属性而不是跨度，从跨度中删除 float: left 并为 div 添加宽度。

div.two {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
}

div.two span {
margin-right: 10px;
//float: left;
}

更新的 jsfiddle:https://jsfiddle.net/75rmaqwb/1/