使用纯 css 调整类似 Chrome 的标签大小答案

【问题标题】：Making Chrome-like tab resize with pure css使用纯 css 调整类似 Chrome 的标签大小
【发布时间】：2012-02-21 22:18:29
【问题描述】：

我正在尝试创建与 Chrome 选项卡类似的选项卡。但我不确定如何以及是否可以不使用 JavaScript。

我不关心浏览器的支持，我只想看看能不能用纯html和css/css3做。

这是规格：

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

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

那么，有哪位 CSS 大神可以支持它吗？如果有一种方法可以用非常有限的 JavaScript 来做到这一点，我也很感兴趣。

谢谢大家！

【问题讨论】：

类似这样的Javascript不应该导致任何性能问题。你能澄清一下性能下降和/或提供你用来创建这个功能的javascript吗？我问的原因是因为我不太确定你是否可以在没有任何 Javascript 的情况下实现这一目标。
javascript 性能慢？我发现这令人惊讶...您的算法效率低下，即 O(k^n) 还是 O(n!)？
好的，我可以告诉你更多关于我的 JavaScript 是如何做到的。我有两个类（标签和标签）。 Tab 对象知道它的初始大小、最大大小和最小大小。选项卡告诉每个选项卡（它应该是什么大小）。然后，当所有选项卡都设置了大小时，它们会将新大小写入 DOM。它本身没有性能问题。但是随着其他所有事情的发生，一个窗口调整大小可能会挂起大约一到两秒钟。所以我尽量优化。
"标签永远不会比里面的文本更宽" 为什么不呢？根据您的规范，不幸的是，这不能用纯 CSS 完成。现在你可以主要做 CSS 并在这里和那里有一点 JS。但在 CSS 中是不可能做到的。 JS 的存在是有原因的。
Tyler Crompton：标签可以比里面的文本更宽，并带有一些填充。但关键是让它尽可能简单。我猜想没有 JS 是不可能的，但想在这里问一下作为最后的确认。或许还能获得一些关于如何最有效地做到这一点的提示。

标签： css

【解决方案1】：

您可以使用 flexbox 非常接近 Chrome 的实际行为...

body {
  font: 12px/130% 'Lucida Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; 
}

ul {
  background-color: #eee;
  display: -webkit-box;
  padding: 10px 10px 0 10px;
}


ul li {
  -webkit-box-flex: 1;
  background: #ddd;
  padding: 10px 15px 6px 15px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 150px;
  min-width: 50px;
  border: solid #ccc 1px;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  text-overflow: ellipsis;  
}

http://jsfiddle.net/a656n/

但是，您的规范仅在 CSS 中是不可能的。我还建议保持active 选项卡'unshrunk' 打破惯例，因为每次单击它们时你的选项卡都会改变位置。

【讨论】：

我认为li { display: table-cell; } 不会（部分）适用于非 Webkit 浏览器，对吗？

【解决方案2】：

我通过使用一个额外的 <span> 元素和 display: table-cell 而不是 flexbox 实现来改进 Duopixels anwer。通过这种方式，您可以获得更好的跨浏览器支持/回退。 http://jsfiddle.net/w34nm/（在 IE8+、Firefox 10、Chrome 17 中测试）

PS：你可能应该使用 JavaScript 来设置列表项的正确宽度值

【讨论】：

【解决方案3】：

首先，您想要的功能不是 Chrome 中的标签如何工作，它们只是保持固定大小，直到没有足够的空间，然后它们会均匀收缩以适应。（根据MDN，你可以做到这一点：

要使包含框中的 XUL 元素大小相同，请将始终包含 box 的 equalsize 属性。这属性没有对应的 CSS 属性。 )

此外，您正在寻找的内容的可视化表示会非常有帮助，我发现一些要求相当混乱。

尽管如此，我还是把this 拼凑在一起了。让我知道它是否完全关闭。

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; }

【讨论】：