最小寬度，最大寬度和縮小以適合父級

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 }並允許每個tab-span到填寫容器的1/4。

試試這個小提琴 。

Answer 2

試試下面的CSS ：

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