最小寬度，最大寬度，和收縮以適應父

永遠停留在一個單行（從來沒有突破到新的生產線）。
不是比它們的內容或其最大寬度更寬的寬度，以較小者爲準。
當最大寬度限制寬度時用橢圓截斷。
不是比它們的最小寬度更小的寬度。

這些項目共享一個父項。如果父母的寬度太小而不能包含使用上述規則的項目，則這些項目應該在寬度方向上收縮，但從不會比最小寬度變薄。

編輯：換句話說，如果父母大於孩子的總寬度，那很好。孩子們不應該擴大以填補父母。如果父母由於數字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瀏覽器的現代化。

來源

2013-10-10 Aaronius

-1

試試下面CSS：

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

來源

2013-10-10 05:36:08 Kishori

嗯...也許我在描述中還不清楚？這使容器縮小到其子女的總寬度。我希望容器保持100％的寬度。如果用戶縮小窗口，容器將縮小。一旦容器收縮小於兒童的總寬度，孩子們應該開始收縮以保持容器寬度。那有意義嗎？ – Aaronius

如果添加max-width:25%到.tab類，它會確保標籤不會溢出。儘管如此，我仍然建議您使用媒體查詢來定位小寬度：在小模式下，刪除.tab span { max-width: 100px }並允許每個標籤跨度填充1/4的容器。

嘗試this fiddle。

來源

2013-10-10 05:40:34 Jeremy

我編輯了我的問題來澄清要求。 – Aaronius

@Aaronius我想我會得到你想要發生的事情，但我不確定是否有可能。首先，瀏覽器需要決定哪些元素可以騰出空間。例如。如果它必須縮小10px，是否會將空間關閉「Kala kazoo ...」或關閉「書籤」？我不認爲你可以在CSS中表達。 – Jeremy

我認爲你可能是對的。我嘗試了所有我能想到的。最後，我最終使用JavaScript進行縮小。謝謝。 – Aaronius

最小寬度，最大寬度，和收縮以適應父

回答

相關問題