CSS空格：nowrap導致容器展開以適應所有文本

我遇到了一個非常奇怪的行爲，其中overflow: hidden,white-space: nowrap和width: 50%強制其包含的元素展開以適應所有文本儘管它受限於寬度聲明（並且實際上不可見）。在容器上設置特定寬度或使用overflow: hidden也無濟於事。然而，將絕對值設置爲有問題的元素的寬度可以解決問題，但我不想使用絕對值。CSS空格：nowrap導致容器展開以適應所有文本

例子：http://jsbin.com/loxuz/3（黃框應該只灰箱的50％，但擴展到適合所有文本中的藍色方塊，即使是在寬度限制。）

有誰看到什麼這裏顯然不對？包含的元素是否應該具有寬度，並且可能與我使用百分比有關？我不覺得可能是這樣，因爲寬度應該從容器向上繼承，對嗎？而不是從文本元素向下口述。我能找到的唯一解釋是white-space: nowrap正在造成這種情況。刪除這個容器的正確寬度，但也導致文本的包裝，我不想要的。

有沒有人知道這個解決方案，或有任何見解？ :)

來源

2014-02-25 Tomm Huth

儘量不要使用一個字段，我相信這是計算樣式，將您的fieldset更改爲div。 – EasyBB

如果您正在考慮默認樣式，我正在使用重置樣式表。可能看起來像空白：nowrap干擾與immidate容器，但進一步向上調查，進一步... –

一個快速的解決方法與字段集不尊重指定寬度的問題是一個min-width: 0添加的元素：

即

fieldset { 
    min-width: 0; 
}

來源

2016-02-24 13:15:42 hunthunthunt

爲什麼這看起來毫無意義？ –

這是你想要的嗎？ DEMO: http://jsbin.com/tifefase/1/。您應該從span中刪除max-width: 50%，併爲#second div編寫width: 50%。如果您想使用fieldset，這是您正在尋找的答案。

#second { 
    width:50%; 
    border:yellow 1px solid; 
} 

span { 
    overflow:hidden; 
    white-space:nowrap; 
    outline:blue 1px solid; 
    display:block; 
}

但是如果你使用div代替字段集，你可以用你的當前值進行。使用SEE THE NEW DEMO，使用div代替fieldset。

#second { 
    width:50%; 
} 

#third { 
    width:100%; 
    border:yellow 1px solid; 
}

來源

2014-02-25 17:05:32 Morven

你是說這是由使用標籤fieldset和節？我想要的是爲黃色方塊填充它的父母給出的任何空間以及超過此寬度的任何內容的剪輯，並且藍色方框不包裹文本。 –

我已經更新了我的答案。 http://jsbin.com/tifefase/3/edit現在，你可以看到，這個黃色方框填滿了它父母給出的任何空間。是的，使用fieldset佔用全部寬度，即使您希望它取得其父級給出的寬度。 – Morven

我在我的實際代碼中測試了這個，刪除了fieldset就行了。我對此非常懇求，因爲之前我從來沒有遇到任何與fieldset有關的實際問題，並認爲它只是像div一樣工作。你是否在關注爲什麼fieldset似乎要遵守擴展的子元素（使用空白：norwap）？ –

CSS空格：nowrap導致容器展開以適應所有文本

回答

相關問題