使用纯CSS实现类似Chrome浏览器的选项卡大小调整

Question

我想创建类似Chrome标签的可调整大小的选项卡，但我不确定是否可以在没有JavaScript的情况下实现。

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

以下是规范：

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

这个问题是否可以使用类似display:box;和box-flex:1;属性来解决呢？我尝试过了但一直没有成功。我已经使用JavaScript完成了它。但是性能不如我想要的好（这是一个大型网络应用程序）。

所以，有CSS方面的高手吗？如果有一种方法可以在非常有限地使用JavaScript的情况下完成它，我也很感兴趣。

谢谢大家！

- funkyfly

---

像这样的JavaScript不应该引起任何性能问题。您能否稍微澄清一下性能下降的情况和/或提供您用于创建此功能的JavaScript代码？我之所以问是因为我不太确定您是否可以在没有任何JavaScript的情况下实现此目标。 - evasilchenko

JavaScript 的性能很慢？我觉得很惊讶...你的算法是否低效，即 O(k^n) 或 O(n!)？ - Travis J

好的，我可以告诉你更多关于我的JavaScript是如何实现的。我有两个类（Tabs 和 Tab）。Tab 对象知道它的初始大小、最大大小和最小大小。Tabs 告诉每个标签页应该是什么大小。然后当所有标签页都设置了大小之后，它们会将新的大小写入DOM中。它本身没有性能问题。但是由于其他一切的发生，一个窗口调整大小可能会卡顿大约一到两秒钟。因此，我正在尽可能地进行优化。 - funkyfly

选项卡的宽度永远不会超过其中的文本。为什么呢？根据您的规格说明，纯CSS无法实现此功能。现在你可以大部分使用CSS，并在这里和那里加入一点JS。但是在CSS中无法实现它。JavaScript存在的原因就在于此。 - Tyler Crompton

Tyler Crompton: 标签页可以比里面的文本更宽，带有一些填充。但关键是尽可能简单。我猜想可能没有JS实现，但最终还是想在这里询问确认一下。也许还能得到一些关于如何最高效地实现的提示。 - funkyfly

你能展示一下你现在的代码吗？这样会更容易提出改进意见，或者找到可以用CSS替换JavaScript的地方。请提供 jsfiddle链接。 - thirtydot

Answer 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标签处于“未收缩”状态会打破传统惯例，因为每次单击标签时，您的标签位置都会改变。

- methodofaction

---

我不认为 li { display: table-cell; } 在非Webkit浏览器中会起作用（部分）, 不会吧？ - Tieson T.

Answer 2

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

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

- Robin Ambachtsheer

Answer 3

首先，您想要的功能并不是 Chrome 中选项卡的工作方式，它们只会保持固定大小，直到没有足够的空间，然后它们会均匀缩小以适应。（根据 MDN，您可以通过以下方式实现：

要使包含框中的 XUL 元素具有相同的大小，请将包含框的 equalsize 属性设置为 always。该属性没有相应的 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; }

- bookcasey