html - 最小宽度、最大宽度和缩小以适合父级

Question

我有几个水平放置的元素应该:

1. 始终保持在一行中(永远不要换行)。
2. 宽度不得大于其内容或最大宽度，以较小者为准。
3. 当 max-width 限制其宽度时，用省略号截断。
4. 宽度不得小于其最小宽度。

这些元素共享同一个父项。如果父项的宽度太小而无法使用上述规则包含元素，则元素应在宽度方向收缩但绝不会比其最小宽度更细。

编辑:换句话说，如果父级大于子级的总宽度，那很好。子项不应扩展以填充父项。如果父级变得小于子级的总宽度，如数字 1、2、3 和 4 所示，则子级应收缩以保持在新的父级宽度内。在 Chrome 的浏览器选项卡中可以看到这方面的一个示例(实际上是我试图重现的内容)。选项卡具有最大宽度和最小宽度。如果您开始沿宽度方向缩小浏览器，那么它会达到标签将不再适合的程度，因此它们会开始缩小，直到达到最小宽度。

我已经确定了数字 1、2、3 和 4，但我不知道如何让它们缩小以保持在父级宽度内。任何帮助将不胜感激。

示例 HTML:

<div class="container">
    <div class="tab"><span>Bookmark</span></div><div class="tab"><span>Finish</span></div><div class="tab"><span>A</span></div><div class="tab"><span>Kala kazoo A Roosky Fantastic</span></div>  
</div>

示例 CSS:

.container {
    border: 1px solid blue;
    white-space: nowrap;
}

.tab {
    display: inline-block;
    border: 1px solid red;
}

.tab span {
    display: inline-block;
    width: 100%;
    min-width: 20px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

JSFiddle:http://jsfiddle.net/ug3en/

目标浏览器:IE9+、现代 Chrome、现代 Firefox 和现代 Safari。

Answer 1

如果添加 max-width:25%到 .tab类，它将确保选项卡不会溢出。

不过，这仍然没有填满主栏，所以我建议您使用媒体查询来定位小宽度:在小模式下删除 .tab span { max-width: 100px }并允许每个制表符跨度填满容器的 1/4。

尝试 this fiddle .