使用纯CSS调整类似Chrome的选项卡

2019年8月3日 181次阅读

我正在尝试创建与Chrome标签的工作方式类似的大小调整标签.但我不确定如何在没有
JavaScript的情况下甚至做到这一点.

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

这是规格：

>标签永远不会比它们内部的文字宽
>当最右边的选项卡在调整大小时到达窗口的右侧时,选项卡应该开始收缩(理想情况是这首先发生在最宽的选项卡上)
>活动标签永远不会缩小
>随着标签缩小,文本应该用省略号隐藏
>标签将停在我设置的最小宽度(因此它们不能达到零宽度).

这可以用display：box;和box-flex：1;属性也许？我还没有成功.我已经使用JavaScript制作了它.但是性能不如我想要的那么好(这是一个很棒的wep应用程序).

那么,任何CSS-Gods都在那里呢？如果有一种方法可以使用非常有限的JavaScript,我也很感兴趣.

谢谢大家！

最佳答案 你可以通过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中是不可能的.我还建议保持活动标签’unhrunk’会违反惯例,因为每次点击它们时标签都会改变位置.

点赞