如何更改
的高度?

HTML CSS

老丝阿飞

2020-03-24

我有一段很大的文字,用分为多个子段落<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-heightheightdisplay: block,我也一派,堆栈溢出-ED简单,但没有找到任何解决方案。在不更改布局的情况下是否有可能?

第3408篇《如何更改
的高度?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

29个回答
小小Green 2020.03.24

可能使用两个br标签是适用于所有浏览器的最简单解决方案。但这是重复的。

<p>
content
</p>
<br /><br />
<p>
content
</p>
<br /><br />
<p>
content
</p>
Itachi 2020.03.24

我通过使用多种解决方案使它可以在IE7中工作,但主要是按照Nigel等人的建议将Br包装在DIV中。添加了ID并在=“ server”处运行,因此从复选框行中删除复选框时,可以删除BR。

.narrow {
    display: block;
    margin: 0px;
    line-height: 0px;
    content: " "; 
}
<div class="narrow" run at="server"><br></br></div>
前端飞云 2020.03.24

采用 <div>

<div>Content 1</div>Content 2

这样就可以在没有垂直空间的情况下换行。

这变成

<div>Content 1</div>Content 2

2020.03.24

对于在此处着陆的任何人进行更一般的回答,因为他们正在解决由<br>标签引起的间距问题为了接近像素完美,我必须进行很多重置。

br {
    content: " ";
    display: block;
}

对于我要解决的特定问题,我必须在行与行之间留一个特定的空间。我在顶部和底部添加了边距。

br {
    content: " ";
    display: block;
    margin: 0.25em 0;
}
达蒙 2020.03.24

像这样只添加一个段落而不是换行符怎么样

bla la bla bla bla abla la bla bla bla abla la bla bla bla a

bla la bla bla bla abla la bla bla bla abla la bla bla bla a

bla la bla bla bla abla la bla bla bla abla la bla bla bla a

然后,您可以为该p指定lineheight或padding或其他内容

村村猴子 2020.03.24

我使用这些方法,但是我不知道是否跨浏览器

=================方法1 ==================

br {
    display:none;
}

要么

=================方法2 ==================

br {
    display: block;
    margin-bottom: 2px;
    font-size:2px;
    line-height: 2px;
}
br:before {
    display: block;
    margin-top: 2px;
    content: "";
}
br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

要么

=================方法3 ==================

br:after { content: "" }
br { content: "" }
ProItachi 2020.03.24

您似乎无法调整BR的高度,但可以使用display:none使其可靠地消失。

在寻找以下解决方案时浏览了此页面:

我遇到的情况是,第三方支付网关(Worldpay)仅允许您使用最多10k的CSS和HTML(不允许脚本)自定义其支付页面,这些页面已注入其模板主体中,并带有一些BR,FONT标签等。加上迫使IE7 / 8进入Quirks模式的DTD,这使得跨浏览器的自定义变得越来越困难!

关闭BR会使事情变得更加一致...

阿飞 2020.03.24

尝试line-heightp包含br标记的标记使用CSS 属性记住,你idp标签,如果你想将其隔离,但它可能会更好使用div隔离,IMO。

猪猪 2020.03.24

我必须开发一种解决方案以将HTML转换为PDF,并在表格单元格中垂直居中放置文本,但是除了输入纯文本之外,其他方法均无用 <br>

因此,在框外思考,我已经通过调整字体大小(以pt为单位)来更改垂直大小。

<font style="font-size: 4pt"><br></font>
西里神奇 2020.03.24
<span style="line-height:40px;"><br></span> 

您必须在每个
元素上都进行内联,但是它应可在大多数浏览器中使用Fiddle并以行高来获得所需的效果。如果在每个元素上都使其内联,则它应可在大多数浏览器和电子邮件中使用(但这太复杂了,无法在此处讨论)。

2020.03.24

抱歉,如果其他人已经说了这一点,那么简单的解决方案是摆弄您的“行高”。如果使用换行符时占用的空间过多,那仅仅是因为您将行高设置得太高。您可以在CSS中更正此错误(但知道它会影响使用该属性的所有内容),也可以执行内联样式来覆盖CSS。

番长猴子 2020.03.24

这是可在IE,Firefox和Chrome中使用的解决方案。想法是将br元素的字体大小从14px的主体大小增加到18px,并将元素降低4px,以便多余的大小在文本行下方。结果是br下方有4px的额外空白。

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

<br />将占用您的文本填充行所需要的空间<p>,您无法更改。如果要更大,则意味着您要分成几段,因此添加other <p>别忘了成为你能做到的最语义;)

宝儿理查德 2020.03.24

迈克尔和尤达都对。您可以做的是使用<p>标记,它是一个块标记,使用底边距来偏移以下块,因此您可以执行类似的操作来获得更大的间距:

<p>
    A block of text.
</p>
<p>
    Another block
</p>

另一种选择是使用block <hr>标签,通过它您可以显式定义间距的高度。

GO 2020.03.24

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中均已损坏)和Android)。)

经过一番尝试和错误之后,我得到了以下替代方法,该替代方法可在所有这些浏览器的当前版本中使用:

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

小胖Gil 2020.03.24

您还可以在CSS中使用“ block-quote”属性。这样就不会影响您的每一行,而只允许您为段落或“块引号”之间的中断设置参数。

更新:
我立场正确。“ blockquote”实际上是一个html属性。您可以像在工作中使用<p>和</ p>一样使用它。然后,您可以在css中为块引用设置参数,例如

blockquote { margin-top: 20px }

希望这可以帮助。这类似于在br上设置参数,并且可能与跨浏览器兼容,也可能不兼容。

飞云 2020.03.24

并请记住,<hr>如在某处建议那样使用标签,将会结束<p>标签,因此请不要理会该解决方案。
如果是 周围有样式的东西<p><hr>插入后,其余内容的样式消失了

蛋蛋猴子前端 2020.03.24
br {   
    content: "";
    margin: 2em;
    display: block;
    margin-bottom: -20px; 
 }

适用于Firefox,Chrome和Safari。尚未在资源管理器中进行测试。(Windows平板电脑已断电。)

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

DavaidTony宝儿 2020.03.24

有趣的是,如果break标记以如下完整格式编写:

<br></br>

那么CSS line-height:145%就可以了。如果break标记写为:

<br> or 
<br/> 

那么它至少在Chrome,IE和firefox中不起作用。奇怪的!

卡卡西Near 2020.03.24

对我有用的是在段落标记之间添加内联...虽然不是最好的解决方案。

<br style="line-height:32px">

--------编辑---------

我在PC / Mac上遇到了这个问题...它为文本提供了新的行高,但没有进行换行...您可能要自己做一些测试。抱歉!

蛋蛋猿 2020.03.24

您可以在该<p>元素上应用line-height ,因此线条会变大。

达蒙 2020.03.24

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

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

下面是一个例子怪异模式

小宇宙 2020.03.24

我认为您可能可以使用:

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

但这不适用于Chrome或Firefox。

只是以为我要提到的是,以防万一发生在其他任何人身上,我会为他们省去麻烦。

凯梅 2020.03.24

因此,上面的窥视基本上得到了类似的答案,但是在这里却非常简洁。可以在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 */
}
Itachi 2020.03.24

CSS:

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

该解决方案可能与跨浏览器不兼容,但至少是这样。还可以考虑设置line-height

line-height:22px;

对于谷歌浏览器,请考虑设置content

content: " ";

除此之外,我认为您还停留在JavaScript解决方案上。

十三 2020.03.24

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

卡卡西 2020.03.24

这是实际上具有跨浏览器支持的正确解决方案

  br {
        line-height: 150%;
     }
凯小胖 2020.03.24

另一种方法是使用HR但是,这是狡猾的部分,使其不可见。

从而:

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

要使用HR模拟更清晰的BR中断:Btw在所有浏览器中均可使用!

{ height:2px; visibility:hidden; margin-bottom:-1px; }
DavaidTony宝儿 2020.03.24

我只是有这个问题,我通过使用解决了

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android