css - 使用纯 css 制作类似 Chrome 的标签调整大小

Question

我正在尝试创建调整大小类似于 Chrome 标签页的标签页。但我不确定如果没有 JavaScript，如何以及是否有可能做到这一点。

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

这是规范:

• 标签永远不会比里面的文字宽
• 当最右边的选项卡在调整大小时到达窗口的右侧时，选项卡应该开始收缩(理想情况是最宽的选项卡首先发生这种情况)
• 事件标签永远不应该缩小
• 随着标签的缩小，文本应该被省略号隐藏
• 标签将在我设置的最小宽度处停止(因此它们不能变为零宽度)。

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

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

谢谢大家!

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 选项卡“unshrunk”打破惯例，因为每次单击它们时选项卡都会改变位置。