Html 使用 CSS 更改 <br> 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7614928/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change <br> height using CSS
提问by ariel
I have seen a questionhere about the same, but I can't get any of the answers to work (at least on Chrome).
我在这里看到了一个相同的问题，但我无法得到任何答案（至少在 Chrome 上）。
This question is only for <br>, I know plenty of other techniques to change the height but in this case I can't change the HTML.
这个问题仅适用于<br>，我知道很多其他改变高度的技术，但在这种情况下我不能改变 HTML。
bla<BR><BR>bla<BR>bla<BR><BR>bla
CSS:
CSS：
br {
display: block;
margin-bottom: 2px;
font-size:2px;
line-height: 2px;
}
Desired effect: smaller inter-line height.
预期效果：较小的行间高度。
The only thing I can get to work is display:none, but then all line break are removed.
我唯一可以开始工作的是display:none，但是所有换行符都被删除了。
Here's a fiddle for itusing some of the techniques, but see that it renders the exact same as without any CSS.
这是使用一些技术的小提琴，但请注意它与没有任何 CSS 的渲染完全相同。
回答by Guffa
You can't change the height of the brtag itself, as it's not an element that takes up space in the page. It's just an instruction to create a new line.
您无法更改br标签本身的高度，因为它不是占用页面空间的元素。这只是创建新行的指令。
You can change the line height using the line-heightstyle. That will change the distance between the text blocks that you have separated by empty lines, but natually also the distance between lines in a text block.
您可以使用line-height样式更改行高。这将改变由空行分隔的文本块之间的距离，但自然也会改变文本块中的行之间的距离。
For completeness: Text blocks in HTML is usually done using the ptag around text blocks. That way you can control the line height inside the ptag, and also the spacing between the ptags.
为了完整性：HTML 中的文本块通常使用p文本块周围的标签来完成。这样你就可以控制p标签内的行高，以及p标签之间的间距。
回答by Ben
This feels very hacky, but in chrome 41 on ubuntu I can make a <br>slightly stylable:
这感觉很hacky，但在ubuntu上的chrome 41中我可以做一个<br>稍微风格化的：
br {
content: "";
margin: 2em;
display: block;
font-size: 24%;
}
I control the spacing with the font size.
我用字体大小控制间距。
回答by FtDRbwLXw6
Take a look at the line-heightproperty. Trying to style the <br>tag is not the answer.
看看line-height物业。尝试设计<br>标签样式不是答案。
Example:
例子：
<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>
回答by Dejan L.
The line height of the brtag can be different from the line height of the rest of the text inside a paragraph text by setting font-size for br tag.
所述的线高度br标签可以是从通过设定字体大小为BR标签的文本段落内的文本的其余部分的线高度不同。
Example: br { font-size: 200%; }
例子： br { font-size: 200%; }
回答by PalDev
You can control the <br>height if you put it inside a height limited div. Try:
<br>如果将其放在高度限制的 div 中，则可以控制高度。尝试：
<div style="height:2px;"><br></div>
回答by mark stewart
Use the contentproperty and style that content. Content behavior is then adjusted using pseudo elements. Pseudo elements ::before and ::after both work in Mac Safari 10.0.3.
使用内容属性和风格，内容。然后使用伪元素调整内容行为。伪元素 ::before 和 ::after 都适用于 Mac Safari 10.0.3。
Here element brcontent is used as the element anchor for element br::aftercontent. Element bris where br spacing can be styled. br::afteris the place where br::after content can be displayed and styled. Looks pretty, but not a 2px <br>.
这里元素brcontent 用作元素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; }
The brelement line-height property is ignored. If negative values are applied to either or both selectors to give vertical 'lift' to brtags in display, then correct vertical spacing occurs, but display incrementally indents display content following each brtag. The indent is exactly equal to the amount that lift varies from actual typographic line-height. If you guess the right lift, there is no indent but a single pile-up line exactly equal to raw glyph height, jammed between previous and following lines.
该BR元素line-height属性被忽略。如果将负值应用于一个或两个选择器以在显示中为br标签提供垂直“提升”，则会出现正确的垂直间距，但显示会在每个br标签之后逐渐缩进显示内容。缩进正好等于升力与实际印刷行高的变化量。如果你猜对了，那没有缩进，只有一条与原始字形高度完全相等的堆积线，卡在前一行和后一行之间。
Further, a trailing brtag will cause the following html display tag to inherit the br:aftercontent styling. Also, pseudo elements cause <br> <br> to be interpreted as a single <br>. While pseudo-class br:activecauses each <br> to be interpreted separately. Finally, using br:active ignores pseudo element br:afterand all br:active styling. So, all that's required is this:
此外，尾随br标签将导致以下 html 显示标签继承br:after内容样式。此外，伪元素会导致 <br> <br> 被解释为单个 <br>。而伪类br:active导致每个 <br> 被单独解释。最后，使用 br:active 会忽略伪元素br:after和所有 br:active 样式。所以，所有需要的是：
br:active { }
which is no help for creating a 2px high <br> display. And here the pseudo class :active is ignored!
这对于创建 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; }
This is a partialsolution only. Pseudo class and pseudo element may provide solution, if tweaked. This may be part of CSS solution. (I only have Safari, try it in other browsers.)
这只是部分解决方案。如果调整，伪类和伪元素可能会提供解决方案。这可能是 CSS 解决方案的一部分。（我只有 Safari，请在其他浏览器中尝试。）
Learn web development: pseudo classes and pseudo elements
回答by ssygon
As the 'margin' doesn't work in Chrome, that's why I used 'border' instead.
由于“边距”在 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.
}
}
回答by Hyman Giffin
The BR is anything but 'extra-special': it is still a valid XML tag that you can give attributes to. For example, you don't have to encase it with a span to change the line-height, rather you can apply the line height directly to the element.
BR 不是“特别的”：它仍然是一个有效的 XML 标记，您可以为其提供属性。例如，您不必用跨度将其包裹起来以更改行高，而是可以将行高直接应用于元素。
You could do it with inline CSS:
您可以使用内联 CSS 来实现：
This is a small line
<br />
break. Whereas, this is a BIG line
<br />
<br style="line-height:40vh"/>
break!Notice how two line breaks were used instead of one. This is because of how CSS inline elements work. Unfourtunately, the most awesome css feature possible (the lhunit) is still not there yet with any browser compatibility as of 2019. Thus, I have to use JavaScript for the demo below.
请注意如何使用两个换行符而不是一个换行符。这是因为 CSS 内联元素的工作方式。不幸的是，截至 2019 年，最棒的 css 功能（lh单元）仍然没有任何浏览器兼容性。因此，我必须在下面的演示中使用 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!You can even use any CSS selectors you want like ID's and classes.
你甚至可以使用任何你想要的 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!You can find our more about line-height at the W3C docs.
您可以在W3C 文档 中找到有关 line-height 的更多信息。
Basically, BR tags are not some void in world of CSS styling: they still can be styled. However, I would recommend only using line-heightto style BR tags. They were never intended to be anything more than a line-break, and as such they might not always work as expected when using them as something else. Observe how even after applying tons of visual effects, the line break is still invisible:
基本上，BR 标签在 CSS 样式世界中并不是空缺的：它们仍然可以设置样式。但是，我建议只使用line-heightBR 标签的样式。它们从来没有打算成为一个换行符，因此当将它们用作其他东西时，它们可能并不总是按预期工作。观察如何即使在应用大量视觉效果后，换行符仍然不可见：
#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>A work-around for things such as margins and paddings is to instead style a span with a br in it like so.
诸如边距和填充之类的解决方法是像这样设置带有 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>Notice how the orange blob above is the span that contains the br.
请注意上面的橙色 blob 如何是包含 br 的跨度。
回答by Gray
<font size="4"> <font color="#ffe680">something here</font><br>
I was trying all these methods but most didn't work properly for me, eventually I accidentally did this and it works great, it works on chrome and safari (the only things I tested on). Replace the colour code thing with your background colour code and the text will be invisible. you can also adjust the font size to make the line break bigger or smaller depending on your desire. It is really simple.
我正在尝试所有这些方法，但大多数方法对我来说都不起作用，最终我不小心做了这个并且效果很好，它适用于 chrome 和 safari（我测试过的唯一东西）。用您的背景颜色代码替换颜色代码，文本将不可见。您还可以根据需要调整字体大小以使换行符变大或变小。这真的很简单。
回答by LandedGently
The line height of the <br>can be different from the line height of the rest of the text inside a <p>. You can control the line height of your <br>tags independently of the rest of the text by enclosing two of them in a <span>that is styled. Use the line-heightcss property, as others have suggested.
的行高<br>可以不同于 a 中其余文本的行高<p>。您可以<br>通过将其中两个包含在带有<span>样式的a中来独立于文本的其余部分来控制标签的行高。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>
