Question

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

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

以下是规范：

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

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

那么，那里有任何CSS-Gods吗？如果有一种方法可以使用非常有限的JavaScript，我也很感兴趣。

全部谢谢！

Answer 1

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

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标签'unhrunk'中断约定，因为每次点击它们时标签都会改变位置。

Answer 2

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

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

Answer 3

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

要使包含框中的XUL元素大小相同，请设置始终包含框的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; }

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

3 个答案: