使用css更改<br>高度

Question

我在这里看到了一个相同的问题,但我无法得到任何工作的答案(至少在chrome上).

这个问题仅适用于<br>,我知道很多其他技术可以改变高度但在这种情况下我不能改变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,但是所有的换行都被删除了.

这是使用一些技术的小提琴,但看到它渲染与没有任何CSS的完全相同.

Answer 1

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

您可以使用line-height样式更改线高.这将改变您用空行分隔的文本块之间的距离,但实际上也会改变文本块中行之间的距离.

为了完整性:HTML中的文本块通常使用p文本块周围的标记来完成.这样您就可以控制p标签内的线高,以及p标签之间的间距.

Answer 2

这感觉非常hacky,但在ubuntu的chrome 41中,我可以做一个<br>有点风格:

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

我用字体大小控制间距.

Answer 3

看看line-height酒店.试图<br>标记样式不是答案.

例:

<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>

Answer 4

所述的线高度br标签可以是从通过设定字体大小为BR标签的文本段落内的文本的其余部分的线高度不同.

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

Answer 5

<br>如果将其放在高度限制的 div 中，则可以控制高度。尝试：

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

Answer 6

使用内容属性和风格，内容。然后使用伪元素调整内容行为。伪元素 ::before 和 ::after 都适用于 Mac Safari 10.0.3。

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

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

br:active { }

这对于创建 2px 高的 <br> 显示没有帮助。这里伪类 :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，请在其他浏览器中尝试。）

学习 Web 开发：伪类和伪元素

注意全局元素 - Mozilla.org 上的 BR