使用 CSS 更改 高度答案

【问题标题】：Change height using CSS使用 CSS 更改 高度
【发布时间】：2011-11-28 17:15:41
【问题描述】：

我在这里看到question 大致相同，但我无法得到任何工作答案（至少在 Chrome 上）。

这个问题只针对 ，我知道很多其他改变高度的技术，但在这种情况下我不能改变HTML。

bla<BR><BR>bla<BR>bla<BR><BR>bla

CSS：

br {
  display: block;
  margin-bottom: 2px;
  font-size:2px;
  line-height: 2px;
}

想要的效果：行间高度更小。

我唯一可以开始工作的是display:none，但随后所有换行符都被删除了。

这是一个使用一些技术的fiddle for it，但请注意它的呈现与没有任何 CSS 的完全相同。

【问题讨论】：

看看这个 SO answer to this same question。 stackoverflow.com/questions/899252/can-you-target-br-with-css/…
有趣的是 - 你可以在 Opera 中设置  ，但在 Webkit 或 IE 中不行。

标签： html css

【解决方案1】：

这感觉很 hacky，但在 ubuntu 上的 chrome 41 中，我可以制作一个   稍微风格化：

br {
  content: "";
  margin: 2em;
  display: block;
  font-size: 24%;
}

我用字体大小控制间距。

更新

我做了一些测试用例来看看响应如何随着浏览器的更新而变化。

*{outline: 1px solid hotpink;}
div {
  display: inline-block;
  width: 10rem;
  margin-top: 0;
  vertical-align: top;
}

h2 {
  display: block;
  height: 3rem;
  margin-top:0;
}

.old br {
  content: "";
  margin: 2em;
  display: block;
  font-size: 24%;
  outline: red;
}

.just-font br {
  content: "";
  display: block;
  font-size: 200%;
}
.just-margin br {
  content: "";
  display: block;
  margin: 2em;
}

.brbr br {
  content: "";
  display: block;
  font-size: 100%;
  height: 1em;
  outline: red;
  display: block;
}

<div class="raw">
  <h2>Raw <code>br</code>rrrrs</h2>
  bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>
  
<div class="old">
  <h2>margin & font size</h2>
  bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>
  
<div class="just-font">
  <h2>only font size</h2>
  bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>

 <div class="just-margin">
  <h2>only margin</h2>
  bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>
   
<div class="brbr">
  <h2><code>br</code>others vs only <code>br</code>s</h2>
  bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>

他们都有自己版本的奇怪行为。除了浏览器默认，只有最后一个尊重一两个brs的区别。

【讨论】：

哇，这是唯一可以缩短线条的解决方案。
如果您无法控制所获得的 HTML 的最佳解决方案
在 2017 年，这对我有用：content: ""; margin: 0
我在 15 年的职业生涯中第一次使用它。它有效，谢谢亲爱的:)
你不应该需要 font-size，我认为只使用 margin 就足够了。

【解决方案2】：

您无法更改br 标记本身的高度，因为它不是占用页面空间的元素。这只是一个创建新行的指令。

您可以使用line-height 样式更改行高。这将改变由空行分隔的文本块之间的距离，但自然也会改变文本块中的行之间的距离。

为了完整性：HTML 中的文本块通常使用 p 标记围绕文本块完成。这样您就可以控制p 标签内的行高，以及p 标签之间的间距。

【讨论】：

当你设计br - 你只是在改变'标记'。 br 触发的换行符 - 属于父容器。 jsfiddle.net/w7gDE/1
另外元素应该有display: block，否则line-height将无效

【解决方案3】：

看看line-height property。尝试设置   标签的样式不是答案。

示例：

<p id="single-spaced">
  This<br> text
  <br> is
  <br> single-spaced.
</p>
<p id="double-spaced" style="line-height: 200%;">
  This<br> text
  <br> is
  <br> double-spaced.
</p>

【讨论】：

附带说明：行高的问题在于它会影响  和连续文本的行间距。能够自定义 br 将允许设计人员只影响换行符。

【解决方案4】：

br 标签的行高可以通过设置 br 标签的 font-size 与段落文本内其余文本的行高不同。

示例：br { font-size: 200%; }

【讨论】：

【解决方案5】：

如果您将  放在高度受限的 div 中，您可以控制它的高度。试试：

<div style="height:2px;"><br></div>

【讨论】：

请注意，使用此方法时，您甚至不再需要 。无论有没有它都会呈现相同的效果，因为<div> 是一个已经导致中断的块级元素，而<div> 中的单个  不会被呈现。
是的，但你至少需要一个否则我相信高度将为空
错误：没有内容的 div 仍然会有这样的高度。您可以而且应该在发帖前进行检查。
问题是关于设置 br 高度而不是 div 高度。就我的评论而言，在某些情况下，当 div 浮动时，或者如果我没记错的话，当父位置是绝对位置时，空的 div 高度将为 null，在这种情况下，您必须添加一个或设置最小高度

【解决方案6】：

使用 content 的 content 属性和样式。然后使用伪元素调整内容行为。伪元素 ::before 和 ::after 都适用于 Mac Safari 10.0.3。

这里元素br内容被用作元素br::after内容的元素锚点。元素 br 是可以设置 br 间距样式的地方。 br::after 是 br::after 内容可以显示和设置样式的地方。看起来很漂亮，但不是 2px
.

br { content: ""; display: block; margin: 1rem 0; }
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; }

br 元素的 line-height 属性被忽略。如果将负值应用于其中一个或两个选择器以在显示中为 br 标记提供垂直“提升”，则会出现正确的垂直间距，但显示会在每个 br之后递增缩进显示内容> 标签。缩进完全等于提升与实际印刷行高不同的量。如果您猜到正确的提升，则没有缩进，只有一条与原始字形高度完全相等的堆积线，卡在前一行和后一行之间。

此外，尾随 br 标记将导致以下 html 显示标记继承 br:after 内容样式。此外，伪元素会导致

被解释为单个
。而伪类 br:active 会导致每个
被单独解释。最后，使用 br:active 会忽略伪元素 br:after 和所有 br:active 样式。所以，所需要的就是：

br:active { }

这对于创建 2px 高的
显示没有帮助。这里伪类 :active 被忽略了！

br:active { content: ""; display: block; margin: 1.25em 0; }
br { content: ""; display: block; margin: 1rem; }
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; }

这只是一个部分解决方案。如果进行调整，伪类和伪元素可能会提供解决方案。这可能是 CSS 解决方案的一部分。（我只有Safari，其他浏览器试试。）

Learn web development: pseudo classes and pseudo elements

Pay attention to global elements - BR at Mozilla.org

【讨论】：

【解决方案7】：

由于“边距”在 Chrome 中不起作用，这就是我改用“边框”的原因。

br {
  display: block;
  content: "";
  border-bottom: 10px solid transparent; // Works in Chrome/Safari
}
@-moz-document url-prefix() {
  br {
    margin-bottom: 10px; // As 'border-bottom' doesn't work in firefox and 'margin-bottom' doesn't work in Chrome/Safari.
  }
}

【讨论】：

虽然回答问题是一项受欢迎的贡献，但有时为纯代码答案提供一些上下文会有所帮助。
现在可以在 Chrome 中使用：br { display: block;内容： ””;边距底部：5px； }

【解决方案8】：

BR 绝不是“特别”：它仍然是一个有效的 XML 标记，您可以为其赋予属性。例如，您不必用 span 包裹它来更改 line-height，而是可以将 line-height 直接应用于元素。

您可以使用内联 CSS 来实现：

This is a small line
<br />
break. Whereas, this is a BIG line
<br />
<br style="line-height:40vh"/>
break!

请注意如何使用两个换行符而不是一个。这是因为 CSS 内联元素的工作方式。不幸的是，截至 2019 年，最棒的 CSS 功能（lh unit）仍然没有与任何浏览器兼容。因此，我必须在下面的演示中使用 JavaScript。

addEventListener("load", function(document, getComputedStyle){"use strict";
  var allShowLineHeights = document.getElementsByClassName("show-lh");
  for (var i=0; i < allShowLineHeights.length; i=i+1|0) {
    allShowLineHeights[i].textContent = getComputedStyle(
      allShowLineHeights[i]
    ).lineHeight;
  }
}.bind(null, document, getComputedStyle), {once: 1, passive: 1});

.show-lh {padding: 0 .25em}
.r {background: #f77}
.g {background: #7f5}
.b {background: #7cf}

This is a small line
<span class="show-lh r"></span><br /><span class="show-lh r"></span>
break. Whereas, this is a BIG line
<span class="show-lh g"></span><br /><span class="show-lh g"></span>
<span class="show-lh b"></span><br style="line-height:40vh"/><span class="show-lh b"></span>
break!

您甚至可以使用任何您想要的 CSS 选择器，例如 ID 和类。

#biglinebreakid {
  line-height: 450%;
  // 9x the normal height of a line break!
}
.biglinebreakclass {
  line-height: 1em;
  // you could even use calc!
}

This is a small line
<br />
break. Whereas, this is a BIG line
<br />
<br id="biglinebreakid" />
break! You can use any CSS selectors you want for things like this line
<br />
<br class="biglinebreakclass" />
break!

您可以在the W3C docs 找到我们关于行高的更多信息。

基本上，BR 标签在 CSS 样式世界中并不是空洞的：它们仍然可以设置样式。但是，我建议只使用 line-height 来设置 BR 标签的样式。它们从来都不是一个换行符，因此在将它们用作其他东西时它们可能并不总是按预期工作。观察即使在应用大量视觉效果后，换行符仍然不可见：

#paddedlinebreak {
  display: block;
  width: 6em;
  height: 6em;
  background: orange;
  line-height: calc(6em + 100%);
  outline: 1px solid red;
  border: 1px solid green;
}

<div style="outline: 1px solid yellow;margin:1em;display:inline-block;overflow:visible">
This is a padded line
<br id="paddedlinebreak" />
break.
</div>

诸如边距和填充等问题的解决方法是像这样设置带有 br 的跨度。

#paddedlinebreak {
  background: orange;
  line-height: calc(6em + 100%);
  padding: 3em;
}

<div style="outline: 1px solid yellow;margin:1em;display:inline-block;overflow:visible">
This is a padded line
<span id="paddedlinebreak"><br /></span>
break.
</div>

请注意上面的橙色 blob 是如何包含 br 的跨度。

【讨论】：

【解决方案9】：

  的行高可以不同于 内其余文本的行高。您可以独立于文本的其余部分来控制   标记的行高，方法是将其中两个包含在样式化的  中。按照其他人的建议，使用 line-height css 属性。

<p class="normalLineHeight">
  Lots of text here which will display on several lines with normal line height if you put it in a narrow container...
  <span class="customLineHeight"><br><br></span>
  After a custom break, this text will again display on several lines with normal line height...
</p>

【讨论】：

问题在于在不更改 html 的情况下为 br 设置主题，例如重新设计旧网站时使用 2 个 br 标签而不是正确的 p 标签。

【解决方案10】：

<font size="4"> <font color="#ffe680">something here</font><br>

我尝试了所有这些方法，但大多数对我来说都不能正常工作，最终我不小心做了这个并且效果很好，它适用于 chrome 和 safari（我测试过的唯一东西）。用您的背景颜色代码替换颜色代码，文本将不可见。您还可以根据需要调整字体大小以使换行符更大或更小。真的很简单。

【讨论】：

【解决方案11】：

#biglinebreakid {
  line-height: 450%;
  // 9x the normal height of a line break!
}
.biglinebreakclass {
  line-height: 1em;
  // you could even use calc!
}

This is a small line
<br />
break. Whereas, this is a BIG line
<br />
<br id="biglinebreakid" />
break! You can use any CSS selectors you want for things like this line
<br />
<br class="biglinebreakclass" />
break!

【讨论】：

【解决方案12】：

你可以把br标签写成show

<br style="content:''; padding: 10px 0;" />

将填充值更改为10px 为您喜欢的任何值。

注意：由于指定了填充，高度在两个方向（顶部和底部）都会增加

【讨论】：