Html 你可以用 css 定位 <br /> 吗？

Can you target <br /> with css?

提问by dc3

Is it possible to target the line-break <br/>tag with CSS?

是否可以<br/>使用 CSS定位换行标记？

I would like to have a 1px dashed line every time there is a line-break. I am customising a site with my own CSS and cannot change the set HTML, otherwise I would use some other way.

每次有换行符时，我都希望有一条 1px 的虚线。我正在使用我自己的 CSS 自定义站点并且无法更改设置的 HTML，否则我会使用其他方式。

I don't think it is possible but maybe there is a way someone knows about.

我不认为这是可能的，但也许有人知道某种方式。

回答by viam0Zah

BRgenerates a line-break and it is only a line-break. As this element has no content, there are only few styles that make sense to apply on it, like clearor position. You can set BR's border but you won't see it as it has no visual dimension.

BR生成一个换行符，它只是一个换行符。由于此元素没有内容，因此只有很少的样式可以应用于它，例如clear或position。您可以设置BR的边框，但您不会看到它，因为它没有视觉尺寸。

If you like to visually separate two sentences, then you probably want to use the horizontal rulerwhich is intended for this goal. Since you cannot change the markup, I'm afraid using only CSS you cannot achieve this.

如果您喜欢在视觉上将两个句子分开，那么您可能想要使用专为此目的而设计的水平标尺。由于您无法更改标记，恐怕仅使用 CSS 无法实现这一点。

It seems, it has been already discussed on other forums. Extract from Re: Setting the height of a BR element using CSS:

好像其他论坛已经讨论过了。摘自Re：使用 CSS 设置 BR 元素的高度：

[T]his leads to a somewhat odd status for BR in that on the one hand it is not being treated as a normal element, but instead as an instance of \A in generated content, but on the other hand it is being treated as a normal element in that (a limited subset of) CSS properties are being allowed on it.

[T]his 导致 BR 的状态有些奇怪，因为一方面它不被视为正常元素，而是被视为生成内容中 \A 的实例，但另一方面它被视为一个普通元素，它允许使用（有限子集）CSS 属性。

I also found a clarification in the CSS 1 specification(no higher level spec mentions it):

我还在CSS 1 规范中找到了一个澄清（没有更高级别的规范提到它）：

The current CSS1 properties and values cannot describe the behavior of the ‘BR' element. In HTML, the ‘BR' element specifies a line break between words. In effect, the element is replaced by a line break. Future versions of CSS may handle added and replaced content, but CSS1-based formatters must treat ‘BR' specially.

当前的 CSS1 属性和值无法描述“BR”元素的行为。在 HTML 中，'BR' 元素指定单词之间的换行符。实际上，该元素被换行符替换。未来版本的 CSS 可能会处理添加和替换的内容，但基于 CSS1 的格式化程序必须特别对待“BR”。

Grant Wagner's testsshow that there is no way to style BRas you can do with other elements. There is also a site online where you can test the results in your browser.

Grant Wagner 的测试表明，没有办法BR像处理其他元素那样设计样式。还有一个在线站点，您可以在其中测试浏览器中的结果。

Update

更新

pelms made some further investigations, and pointed outthat IE8 (on Win7) and Chrome 2/Safari 4b allows you to style BRsomewhat. And indeed, I checked the IE demo pagewith IE Net Renderer's IE8 engine, and it worked.

pelms 进行了一些进一步的调查，并指出IE8（在 Win7 上）和 Chrome 2/Safari 4b 允许您进行一些样式设置BR。事实上，我用IE Net Renderer 的 IE8 引擎检查了IE 演示页面，它工作正常。

Update 2c69 made some further investigations, and it turns out you canstyle the markerfor brquite heavily (though, not cross-browser), yet this will not affect the line-break itself, because it seem to belong to parent container.

更新 2c69 进行了一些进一步的调查，结果证明您可以为标记设置br相当多的样式（尽管不是跨浏览器），但这不会影响换行符本身，因为它似乎属于父容器。

回答by Rok

Try the following, I put it together using Update 2 from another answer with high votes, and it worked perfectly for me:

尝试以下操作，我使用来自另一个获得高票数的答案的更新 2 将其放在一起，它对我来说非常有效：

br
{   content: "A" !important;
    display: block !important;
    margin-bottom: 1.5em !important;
}

回答by Bernard Sfez

There is one good reason you would need to style a <br>tag.

您需要为<br>标签设置样式是有充分理由的。

When it is part of code you don't want to (or can't) change and you want this particular <br>not to be displayed.

当它是您不想（或不能）更改的代码的一部分并且您<br>不希望显示此特定内容时。

.xxx br {display:none}

Can save a lot of time and sometimes your day.

可以节省大量时间，有时甚至可以节省您的一天。

回答by Grant Wagner

For the benefit of any future visitors who may have missed my comments:

为了任何可能错过我的评论的未来访客的利益：

br {
    border-bottom:1px dashed black;
}

does not work.

不起作用。

It has been tested in IE 6, 7 & 8, Firefox 2, 3 & 3.5B4, Safari 3 & 4 for Windows, Opera 9.6 & 10 (alpha) and Google Chrome (version 2) and it didn't work in any of them. If at some point in the future someone finds a browser that does support a border on a <br>element, please feel free to update this list.

它已经在 IE 6, 7 & 8, Firefox 2, 3 & 3.5B4, Safari 3 & 4 for Windows, Opera 9.6 & 10 (alpha) 和 Google Chrome (version 2) 中进行了测试，但它在任何一个中都不起作用他们。如果将来有人发现确实支持<br>元素边框的浏览器，请随时更新此列表。

Also note that I tried a number of other things:

另请注意，我尝试了许多其他事情：

br {
    border-bottom:1px dashed black;
    display:block;
}

br:before { /* and :after */
    border-bottom:1px dashed black;
    /* content and display added as per porneL's comment */
    content: "";
    display: block;
}

br { /* and :before and :after */
    content: url(a_dashed_line_image);
}

Of those, the following does works in Opera 9.6 and 10 (alpha) (thanks porneL!):

其中，以下内容适用于 Opera 9.6 和 10 (alpha)（感谢 porneL！）：

br:after {
    border-bottom:1px dashed black;
    content: "";
    display: block;
}

Not very useful when it is only supported in one browser, but I always find it interesting to see how different browsers implement the specification.

当它只在一种浏览器中支持时不是很有用，但我总是觉得看看不同的浏览器如何实现规范很有趣。

回答by Roy Rico

I know you can't edit the HTML, but if you can modify the CSS, can you add javascript?

我知道你不能编辑 HTML，但是如果你可以修改 CSS，你可以添加 javascript 吗？

if so, you can include jquery, then you could do

如果是这样，你可以包含 jquery，那么你可以做

<script language="javascript">
$(document).ready(function() {
    $('br').append('<span class="myclass"></span>');
});
</script>

回答by pelms

br { padding: 1px 8px; border-bottom: 1px dashed #000 }

renders as below in IE8... not a lot of use in just one browser though.

在 IE8 中呈现如下...不过在一个浏览器中使用不多。

(N.B. I'm using IE 8.0.7100 (on Win7 RC) if that makes any difference)

（注意，如果有任何区别，我使用的是 IE 8.0.7100（在 Win7 RC 上））

Also,

还，

br:after { content: "..." }  
br { content: "" }`

or,

或者，

br:after {
    border: 1px none black;
    border-bottom-style: dashed;
    content: "";
    padding: 0 6px 0;
}

br { content: "" }

br { content: "" }

gives a dashed line in Chrome 2 / Safari 4b but loses the line break which (unless anyone can come up with a way to reintroduce that) makes it less than useless.

在 Chrome 2 / Safari 4b 中给出了一条虚线，但失去了换行符（除非有人能想出一种方法来重新引入它）使它变得没用。

e.g.
IE8 test, Chrome/Safari testand another

例如
IE8测试，铬/ Safari的测试和另一

回答by Kris

My own tests conclusively show that brtags do not like to be targeted for css.

我自己的测试最终表明br标签不喜欢作为 css 的目标。

But if you can add style then you can probably also add a scrip tag to the header of the page? Link to an external .jsthat does something like this:

但是，如果您可以添加样式，那么您可能还可以在页面的标题中添加一个脚本标签吗？链接到执行以下操作的外部.js：

function replaceLineBreaksWithHorizontalRulesInElement( element )
{
    elems = element.getElementsByTagName( 'br' );
    for ( var i = 0; i < elems.length; i ++ )
    {
        br = elems.item( i );
        hr = document.createElement( 'hr' );
        br.parentNode.replaceChild( hr, br );
    }
}

So in short, it's not optimal, but here is my solution.

简而言之，这不是最佳选择，但这是我的解决方案。

回答by y34h

this seems to solve the problem:

这似乎解决了问题：

<!DOCTYPE html>

<style type="text/css">
#someContainer br { display:none }
#someContainer br + a:before { content:"|"; color: transparent; letter-spacing:-100px; border-left: 1px dashed black; margin:0 5px; }
</style>

<div id="someContainer"><a>link</a><br /><a>link</a><br /><a>link</a></div>

回答by Dave Burton

UPDATED 9/13/2019:

2019 年 9 月 13 日更新：

The purpose of styling the <br>tag like this is to make a "bigger" line break (i.e., with a bit of extra space between the lines).

<br>像这样设置标签样式的目的是使“更大”的换行符（即，在两行之间留出一点额外的空间）。

The "oldbig" class (below) was tested and worked properly in Chrome 66.0.3359.181, Firefox Quantum 60.0.2, Edge 42.17134.1.0 and IE 11.48.17134.0, to style . Unfortunately, it broke in Chrome version 76 and its derivatives (circa August 2019). The symptom is that the extra space between lines is no longer displayed.

“oldbig”类（如下）已在 Chrome 66.0.3359.181、Firefox Quantum 60.0.2、Edge 42.17134.1.0 和 IE 11.48.17134.0 中测试并正常工作，以将 . 不幸的是，它在 Chrome 76 及其衍生版本（大约 2019 年 8 月）中崩溃了。症状是不再显示行之间的额外空间。

The "newbig" class is tested and working properly in current versions of Chrome (76.0.3809.132), Opera, Firefox, Edge, IE, Brave, and Palemoon:

“newbig” 类在当前版本的 Chrome (76.0.3809.132)、Opera、Firefox、Edge、IE、Brave 和 Palemoon 中经过测试并正常工作：

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

Here's a demo:

这是一个演示：

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

<p style="max-width:20em">This is a paragraph which demonstrates the difference 
 between a line-break which occurs when the text exceeds the max-width, and a 
 line-break forced by a &lt;br&gt; tag here:<br>
 and a line break forced by a &lt;br class=oldbig&gt; tag here:<br class=oldbig>
 and a line break forced by a &lt;br class=newbig&gt; tag here:<br class=newbig>
 This is the next line after the &lt;br class=newbig&gt; tag (but still 
 part of the same paragraph).</p>
<p style="max-width:20em">And this is another paragraph, entirely.</p>

This is the result, displayed in Chrome v.76:

这是结果，显示在 Chrome v.76 中：

回答by richardtallent

BR is an inline element, not a block element.

BR 是行内元素，而不是块元素。

So, you need:

所以，你需要：

 br.Underline{
    border-bottom:1px dashed black;
    display: block;
  }

Otherwise, browsers that are a little pickier about such things will refuse to apply borders to your BR elements, since inline elements don't have borders, padding, or margins.

否则，对这些事情有点挑剔的浏览器将拒绝为您的 BR 元素应用边框，因为内联元素没有边框、填充或边距。