溢出并自动

Question

这个问题是出于愚蠢的问题。我刚刚注意到我有这个标记的时候：

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

br代码无效。但是，如果父级没有高度，即height: auto - br标签生效 - 为什么会出现这种情况？

在所有情况下，即在不同的文档类型和浏览器中，它是否相同？

Answer 1

好吧，如果你考虑一下那么这应该是该div中所有元素/文本的情况......当内容很大时，如果你添加“overflow：hidden;”，你会得到一个滚动

但是为什么你要在一个可能需要长高的元素上设置一个高度？

Answer 2

我认为<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>，根据定义，它们只是换行符，而不是直接可见。

Answer 3

如果您为div提供overflow: auto，则可以看到<BR>确实在那里。

Answer 4

是的，所有浏览器都是一样的。

溢出并自动

您的文字对于内容框来说太高了。如果溢出。
由于您尚未设置溢出样式，因此根据the spec，它将获得visible的默认值。

参见解释性示例：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文件，将样式集中在样式文件中，避免重复，简化更改......列表不断进行。

Answer 5

试试这个......

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

当父亲有身高时，BR标签无效

5 个答案:

溢出并自动

滥用`br`

内联样式

当父亲有身高时，BR标签无效

5 个答案:

溢出并自动

滥用br

内联样式

滥用`br`