內容與「溢出 - X：滾動;空白：NOWRAP」滿溢出來的背景

用下面的HTML/CSS標記（live example）的，內容與「溢出 - X：滾動;空白：NOWRAP」滿溢出來的背景

<div style="border:solid 1px red; width:200px;padding:10px;padding-right:0;overflow-x:scroll;"> 
    <div style="width:100%;background:yellow;">text text text text text text text</div> 
    <div style="width:100%;background:yellow;">text text text text text text</div> 
</div>

的內容內部div會自動換行。我不想那樣。但是，如果我在外部div上使用white-space: nowrap，則內部div的黃色背景顏色不會延伸到其內容的末尾。

我該如何修復這個標記，以便內部div的內容不會換行和所有的內容都顯示在黃色背景上？

來源

2012-02-03 Tony Lee

您的要求聽起來有點爭議。你的意思是沒有自動換行的話？你有什麼樣的背景不合適？ – 2012-02-03 16:57:06

我只是不想讓單詞中斷。 – 2012-02-03 17:02:30

如何讓孩子們舒展？ – 2012-02-03 17:03:22

這裏有一個解決方案，seems to do what I think you're asking for：

<div style="border:solid 1px red; width:200px;padding:10px;padding-right:0;overflow-x:scroll;white-space:nowrap"> 
    <div style="display:inline-block;min-width:100%;background:yellow;">text text text text text text text</div><br> 
    <div style="display:inline-block;min-width:100%;background:yellow;">text text text text</div> 
</div>

通知的display: inline-block屬性，使用min-width代替width，和div之間出現的<br>標籤。老實說，這感覺就像一個非常醜陋的kluge。我忍不住想，必須是一個更好的方法來實現這個結果。

來源

2012-02-03 17:52:53

謝謝你糾正我的Eglish。你的答案有幫助。但我傾向於改變我的佈局，而不是使用CSS黑客。 – 2012-02-04 17:35:59

我終於決定用js來避免這個bug – 2012-02-04 17:44:13

內容與「溢出 - X：滾動;空白：NOWRAP」滿溢出來的背景

回答

相關問題