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提供省略号属性而不是span，从span中删除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/

Answer 2

还有几个jquery插件可以解决这个问题，但是很多插件不能处理多行文本。以下作品：

带有多个跨度的div上的文本溢出省略号

2 个答案: