最小宽度、最大宽度和适应父元素缩小

Question

我有几个水平排列的项目，应该满足以下要求：

1. 始终保持在一行中（不会换到新行）。
2. 宽度不应大于内容或其最大宽度中较小的那个。
3. 当最大宽度限制其宽度时，使用省略号进行截断。
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。

- Aaronius

Answer 1

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

但这样仍然无法填充主要栏，建议使用媒体查询来针对小屏幕：在小屏幕模式下，去掉 .tab span { max-width: 100px } 并允许每个选项卡均分容器的四分之一。

请尝试这个示例。

- Jeremy

---

我已经编辑了我的问题以澄清要求。 - Aaronius

@Aaronius，我明白你想要实现什么，但我不确定是否可能。首先，浏览器需要决定从哪个元素中减少空间。例如，如果它必须缩小10像素，它会从“Kala kazoo…”还是“Bookmark”中减少空间？我认为你无法用CSS表达这一点。 - Jeremy

我觉得你可能是对的。我尝试了我所能想到的一切。最终我使用JavaScript进行了缩小。谢谢。 - Aaronius

@Aaronius，好问题。你介意把你的JS解决方案分享成答案吗？ - Nelu

Answer 2

尝试以下 CSS：

.container {
    border: 1px solid blue;
    white-space: nowrap;
    width:auto;
    position:absolute;
}

- Kishori

---

嗯...也许我的描述不够清晰？这会使容器缩小到其子元素的总宽度。我想让容器保持100％的宽度。如果用户缩小窗口，容器将缩小。一旦容器缩小到小于子元素的总宽度，子元素应开始缩小以保持在容器宽度内。这有意义吗？ - Aaronius