包含多个水平元素的包装器的CSS文本溢出省略号

Question

我有一个宽度可变的包装元素（它必须取决于浏览器的当前宽度）。

在该包装内部可以有1,2或3个span元素。 每个spans上的文本长度未知。

这是预期的行为，但对于此示例，我被迫为每个span定义30％的宽度（定义宽度为30％以使用text-overflow:ellipsis），但是，和我不能在这个元素中指定一个固定的宽度，因为我知道有多少个跨度。

有没有办法在不指定每个元素的宽度且不使用java脚本的情况下获得此行为？

Answer 1

您必须指定宽度otherwize，每个元素的宽度为100％：/

当只有1个元素

时，不指定宽度不是问题

Answer 2

你可以计算渲染了多少个跨度然后将整个宽度除以跨度数...结果将是每个跨度的宽度...然后你可以做类似的事情

 $('.spans').css('width', computedwidth);