如何改变一个<br>的高度？

Question

我有一段很大的文字,分为以下的分段<br>:

<p>
  Blah blah blah.
  <br/>
  Blah blah blah. Blah blah blah. Blah blah blah.
  <br/>
  Blah blah blah.
</p>

我想扩大这些分段之间的差距,就像有两个<br>或类似的东西.我知道正确的方法是使用<p></p>,但是现在我无法改变这种布局,所以我正在寻找仅限CSS的解决方案.

我试过设置<br>的line-height和height有display: block,我也一派,堆栈溢出-ED简单,但没有找到任何解决方案.这是否可以在不改变布局的情况下实现？

Answer 1

CSS:

br {
   display: block;
   margin: 10px 0;
}

解决方案可能不是跨浏览器兼容的,但它至少是这样的.还要考虑设置line-height:

line-height:22px;

对于Google Chrome,请考虑设置content:

content: " ";

除此之外,我认为你坚持使用JavaScript解决方案.

Answer 2

以下是实际具有跨浏览器支持的正确解决方案:

  br {
        line-height: 150%;
     }

Answer 3

因此,上面的窥视基本上有类似的答案,但在这里它是非常简洁的.适用于Opera,Chrome,Safari和Firefox,很可能也适用于IE？

br {
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: 0; /* change this to whatever height you want it */
}

Answer 4

另一种方法是使用HR.但是,这是狡猾的部分,让它看不见.

从而:

<hr style="height:30pt; visibility:hidden;" />

使用HR模拟清洁BR断裂:Btw适用于所有浏览器!

{ height:2px; visibility:hidden; margin-bottom:-1px; }

Answer 5

据我所知,<br>不具有的高度,它只是强制断线.你所拥有的是一个带有一些换行符的文本,除了自动换行符,而不是子段.您可以更改行间距,但这会影响所有行.

Answer 6

我刚遇到这个问题,我用它来解决它

<div style="line-height:150%;">
    <br>
</div>

Answer 7

我知道这是一个老问题，但对我来说，它实际上是通过使用带边距的空段落来实现的：

<p class="" style="margin: 4px;"></p>

增加或减少边距大小将增加或减少元素之间的距离，就像边框一样，但可调整。

最重要的是，它与浏览器兼容。

Answer 8

您可以在该<p>元素上应用行高,因此行变大.

Answer 9

我之前没有尝试过:before/ :afterCSS2伪元素,主要是因为它只在IE8中支持(这与IE浏览器有关).这可能是唯一可能的CSS解决方案:

br:before {
    display: block;
    margin-top: 10px;
    content: "";
}

下面是一个例子的怪异模式.

Answer 10

有趣的是，如果 break 标签以完整形式编写如下：

<br></br>

然后 CSS line-height:145% 有效。如果 break 标签写成：

<br> or 
<br/> 

那么它不起作用，至少在 Chrome、IE 和 firefox 中是这样。奇怪的！

Answer 11

2019 年 9 月 13 日更新：

我用<br class=big>做一个超大的换行符，当我需要一个。直到今天，我的风格是这样的：

br.big {line-height:190%;vertical-align:top}

（vertical-align:top只有 IE 和 Edge 需要。）

这适用于我尝试过的所有主要浏览器：Chrome、Firefox、Opera、Brave、PaleMoon、Edge 和 IE11。

但是，它最近在基于 Chrome 的浏览器中停止工作：我的“大”换行符变成了正常大小的换行符。

（我不知道他们什么时候破坏了它。截至 2019 年 9 月 12 日，它仍然可以在我过时的 Chromium Portable 55.0.2883.11 中使用，但在 Opera 63.0.3368.71 和 Chrome 76.0.3809.132（Windows 版）中已损坏和安卓））

经过反复试验，我最终得到了以下替代品，它适用于所有这些浏览器的当前版本：

br.big {display:block; content:""; margin-top:0.5em; line-height:190%; vertical-align:top;}

笔记：

line-height:190% 除了最新版本的基于 Chrome 的浏览器之外，所有东西都适用。

vertical-align:topIE 和 Edge 需要（与 结合使用line-height:190%），以获得位于前一行之后的额外空间，它所属的位置，而不是部分之前和部分之后。

display:block;content:"";margin-top:0.5em 适用于 Chrome、Opera 和 Firefox，但不适用于 Edge 和 IE。

<br>如果您不介意编辑 HTML，则在标签后添加一些额外的垂直空间的另一种（更简单）方法是使用类似的方法。它适用于所有浏览器：

<span style="vertical-align:-37%"> </span><br>

（当然，您可以根据需要调整“-37%”，以获得更大或更小的差距。）这是一个演示页面，其中包含该主题的一些其他变体：

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html



2020 年 5 月 28 日：

我已经更新了演示页面；它现在演示了上述所有技术：

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

Answer 12

br {   
    content: "";
    margin: 2em;
    display: block;
    margin-bottom: -20px; 
 }

适用于 Firefox、Chrome 和 Safari。尚未在资源管理器中测试。（Windows 平板电脑没电了。）

换行符、字体大小在 Firefox 和 Safari 中的工作方式不同。

Answer 13

我有一个想法，您可能可以使用：

br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

但这在 chrome 或 firefox 上不起作用。

只是想我会提到，以防其他人发生这种情况，我会为他们省去麻烦。

Answer 14

请记住，（错误）<hr>按照某处建议的方式使用标签会结束<p>标签，因此请忘记该解决方案。
如果 f.ex. 有些东西在周围设置<p>了样式，在<hr>插入后，该样式在其余内容中消失了。

Answer 15

这是一个适用于 IE、Firefox 和 Chrome 的解决方案。想法是将 br 元素的字体大小从 body 大小的 14px 增加到 18px，并将元素降低 4px，使额外的大小在文本行下方。结果是 br 下方有 4px 的额外空白。

br 
{ 
font-size: 18px; 
vertical-align: -4px; 
}