html - 具有多个水平元素的包装器的 CSS 文本溢出省略号

Question

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

在该包装器内可能有 1、2 或 3 个跨度元素。每个文本的长度spans是未知的。

这是预期的行为，但对于这个例子，我被迫为每个span30% 定义一个宽度（定义一个 30% 的宽度以使用text-overflow:ellipsis），但是，我不能在这个元素中分配一个固定宽度，因为我字体知道有多少跨度。

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

Answer 1

您必须指定一个宽度，否则每个元素的宽度都将是 100%：/

只有 1 个元素时不指定宽度不是问题

Answer 2

您可以计算渲染了多少跨度，然后将整个宽度除以跨度数...结果将是每个跨度的宽度...然后您可以执行类似的操作

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