使用纯CSS调整Chrome样式标签页的大小 [英] Making Chrome-like tab resize with pure css

问题描述

我尝试创建可调整大小的标签，类似于Chrome标签页。但我不知道如何和如果它甚至可以没有JavaScript。

I am trying to create tabs that resize a bit similar to how Chrome tabs does. But I am not sure how and if it is even possible to do without JavaScript.

我不在乎浏览器支持，我只想看看是否可以使用纯html和css / css3。

I don't care about browser support, I only want to see if it can be done with pure html and css/css3.

以下是规格：

• 标签永远不会超出其中的文字


• 当最右边的标签页在调整大小时到达窗口右侧时，标签页应该开始缩小（理想情况是这种情况发生在最宽的标签页之前）




• 随着标签缩小，文本应该被省略号隐藏


• 标签将停止在我设置的最小宽度（因此它们不能为零宽度）。

• The tabs are never wider than the text inside them
• When the right most tab reaches the right side of the window on resize, the tabs should start shrinking (ideal is that this happens to the widest tab first)
• the active tab should never shrink
• As the tabs shrink, the text should be hidden by ellipsis
• the tabs will stop at a min-width that I set (so they can't go to zero width).

和box-flex：1;属性？我还没有成功。我已经使用JavaScript。但是性能不如我想要的那么好（这是一个大的wep应用程序）。

Can this be made with something like display: box; and box-flex: 1; properties perhaps? I haven't managed to make it yet. I have already made it with JavaScript. But the performance is not as good as I want it to (this is a BIG wep app).

所以，任何CSS-神出来了吗？

So, any CSS-Gods out there up for it? If there is a way to do it with very limited use of JavaScript, I am also interested.

感谢所有！

推荐答案

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

I improved on Duopixels anwer by using one extra <span> element and display: table-cell instead of the flexbox implementation. This way you achieve better cross-browser support/fallback. http://jsfiddle.net/w34nm/ (Tested in IE8+, Firefox 10, Chrome 17)

PS：您应该可以使用JavaScript在列表项上设置正确的宽度值

PS: you should probably use JavaScript to set the right width values on the list items

这篇关于使用纯CSS调整Chrome样式标签页的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！