這個問題被諷刺地提出來。我剛剛注意到，當我有這個有點html代碼：家長有身高時，BR標籤沒有效果

<div style="height: 20px; background-color: yellow;"> 
    Test 
    <br /> 
    <br /> 
    <br /> 
</div>

的br標籤沒有任何效果。但是，如果父母沒有身高，即height: auto - br標籤生效 - 爲什麼會出現這種情況？

這是在跨即不同類型的文檔和瀏覽器的情況都一樣？

來源

2012-01-23 Abs

我認爲<br>標籤做有效果。如果我改變你的標記如下：

<div style="overflow: visible; height: 20px; background-color: yellow;"> 
    Test 
    <br /> 
    Test 2 
    <br /> 
    Test 3 
    <br /> 
    Test 4 
</div>

然後我就可以看到效果 - jsFiddle here。

Lines of text overflowing a div

默認溢出visible（在我的瀏覽器，反正），所以文字明顯溢出<div>。在<br>的情況下，您只會看到延伸到<div>以下的空行，這些空行不可見但存在。

如果您將overflow: scroll添加到<div>，您還可以看到效果 - 文字末尾顯示空白行，您可以滾動瀏覽。標記：

<div style="overflow: scroll; height: 20px; background-color: yellow;"> 
    Test 
    <br /> 
    <br /> 
    <br /> 
</div>

（jsFiddle here）。

因此，<br>就做有所作爲，但在<div>設置高度，你實際上並沒有能看到區別，如果有只有<br> S，因爲它們是通過定義，只是行打破，而不是直接可見。

來源

2012-01-23 10:25:22

如果提供overflow: auto你的DIV，你就可以看到<BR> s爲確實有。

來源

2012-01-23 10:09:25 techfoobar

如果家長有高度，也不會有所作爲。 – Abs

當我添加'overflow：scroll'時，它確實對我有所幫助。http://jsfiddle.net/gothick/Y45VF/ –

那麼，如果你想想那麼這應該是所有元素的情況下/在文本的div ...當內容是大的，那麼你會如果添加得到滾動「溢出：隱藏;」

但是，爲什麼你會設置可能需要長高的元素的高度？

來源

2012-01-23 10:13:46 Mackelito

在那個例子中，如果我把'overflow：hidden;'它不顯示滾動條。 – Abs

@Abs當然;你期望它做什麼？ – ANeves

是的，這是在所有瀏覽器相同。

溢出和自動

您的文字對於內容框太高。所以如果溢出。
由於您沒有設置溢出的風格，它得到默認是visible，根據the spec。

見的解釋例如：http://jsfiddle.net/bsZG7/
（第二div有填充左的理解是怎麼回事就方便）

因爲那溢出的內容是不可見的，你不會注意到它。

濫用`br`

br元素表示換行。
而且，引述 http://developers.whatwg.org/text-level-semantics.html#the-br-element：

雖然換行符在視覺媒體通過後續文本物理地移動到一個新的線通常表示，樣式表或用戶代理將是導致線同樣合理的分解要呈現以不同的方式，例如作爲綠點或作爲額外的間距。

你不應該用它來風格，因爲你似乎是。
如果你想在某個盒子的底部留一個邊距，給它一個類或ID並放入你的css文件margin-bottom: 30px;。

內嵌樣式

你應該避免內聯樣式儘可能的，而不是將所有樣式的CSS文件中。您可能只是爲了測試而這樣做，但我仍然會留下建議。

對此有許多理由，包括可以緩存css文件，將樣式文件集中在樣式文件中，避免重複，簡化更改......列表繼續。

來源

2012-01-23 10:33:08 ANeves

嘗試......

<body> 
<div style="height: 20px; background-color: yellow;"> 
    Test 
    <br /> 
    Line2 
    <br /> 
    Line3 
    <br /> 
    Line4 
    </div> 
</body>

來源

2013-05-12 09:40:12

家長有身高時，BR標籤沒有效果

回答

溢出和自動

濫用br

內嵌樣式

相關問題

濫用`br`