Question

我有几个横向布置的项目应该：

始终保持一排（永不闯入新线）。
宽度不大于其内容或最大宽度，以较小者为准。
当max-width限制其宽度时，使用省略号截断。
宽度不小于最小宽度。

这些项目共享同一个父项。如果父级的宽度太小而无法使用上述规则包含项目，则项目应按宽度方式缩小，但不得超过其最小宽度。

编辑：换句话说，如果父级大于子级的总宽度，那很好。孩子们不应该扩大以填补父母。如果父项小于子项的总宽度（数字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。

Answer 2

请尝试以下CSS：

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

最小宽度，最大宽度和缩小以适合父级

2 个答案: