使用纯 CSS 制作类似 Chrome 的选项卡大小调整

Question

我正在尝试创建调整大小的选项卡，其大小与 Chrome 选项卡的做法类似。但我不确定如何以及是否可以在没有 JavaScript 的情况下做到这一点。

我不关心浏览器支持，我只想看看是否可以用纯html和css/css3来完成。

这是规格：

• 选项卡永远不会比其中的文本宽
• 当最右边的选项卡在调整大小时到达窗口的右侧时，选项卡应该开始缩小（理想情况是最宽的选项卡首先发生这种情况）
• 活动选项卡永远不应该缩小
• 随着选项卡缩小，文本应通过省略号隐藏
• 选项卡将停止在我设置的最小宽度处（因此它们不能达到零宽度）。

这可以用类似 display: box; 的东西来做吗？和盒子柔性：1；也许属性？我还没有成功。我已经用 JavaScript 做到了。但性能没有我想要的那么好（这是一个很大的 wep 应用程序）。

那么，有 CSS 大神支持吗？如果有一种方法可以在非常有限地使用 JavaScript 的情况下做到这一点，我也很感兴趣。

谢谢大家！

Answer 1

好吧，首先，您想要的功能不是 Chrome 中选项卡的工作方式，它们只是保持固定大小，直到没有足够的空间，然后均匀收缩以适应。（根据MDN，您可以完成此操作：

要使包含框中的 XUL 元素具有相同的大小，请将包含框的 equalsize 属性设置为始终值。该属性没有对应的 CSS 属性。）

此外，您正在寻找的内容的视觉表示会非常有帮助，我发现一些需求相当令人困惑。

尽管如此，我还是把这个拼凑起来了。让我知道它是否完全接近。

ul{
    display: -webkit-box; 
    width:500px; 
    background:lightgray; text-align:left;}
li{background: gray; text-align:center; height:24px; -webkit-box-flex: 1; min-width:30px; max-width:100px; overflow:hidden; text-overflow: ellipsis; }