你能用 css 来定位 吗？

小开

BR 是一个内联元素，而不是块元素。

所以，你需要:

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

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

小开

从技术上来说，是的，您可以直接使用 CSS 来定位  元素，或者通过向它应用一个类来定位该类。也就是说， 产生一个换行符，它只是一个换行符。因为这个元素没有内容，所以只有很少的样式可以应用到它上面，比如 clear或 position。你可以设置  的边界，但是你不会看到它，因为它没有视觉维度。

如果你喜欢在视觉上分开两个句子，那么你可能想使用水平尺水平尺水平尺，这是为了这个目标。因为您不能更改标记，所以恐怕只使用 CSS 是无法实现这一点的。

看起来，其他论坛上已经讨论过这个问题了:

[ T ]这导致了一种有点奇怪的状态对 BR 来说，一方面是不被视为正常元素, 而是作为 A 的实例生成的内容，但在另一方面手被当作正常人对待元素(有限的子集) 允许 CSS 属性它。

我还在 CSS 1规范中发现了一个澄清(没有更高级别的规范提到它) :

当前的 CSS1属性和值无法描述在 HTML 中，「 BR 」元素是「 BR 」元素指定实际上，元素是取而代之的是断线。未来 CSS 的版本可以处理添加的和取代内容，但基于 CSS1 格式化程序必须特别对待“ BR”。

Grant Wagner 的测试表明，不可能像对待其他元素那样对 BR进行样式化。还有一个网站在线，您可以在浏览器中测试结果。

Pelms 做了一些进一步的调查，而且指出认为 IE8(在 Win7上)和 Chrome 2/Safari 4b 允许你在某种程度上对 BR进行样式化。事实上，我用网络渲染器的 IE8引擎检查了 IE 演示页面，它起作用了。

C69做了一些进一步的调查，发现 br的可以风格 记号笔相当严重(虽然，不是跨浏览器) ，但是这不会影响换行本身，因为它似乎属于父容器。

小开

为了那些可能错过我评论的未来访客的利益:

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

不起作用。

它已经在 IE 6,7 & 8，Firefox 2,3 & 3.5 B4，Safari 3 & 4，Opera 9.6 & 10(alpha)和 Google Chrome (version 2)中进行了测试，但是都不能正常工作。如果将来有人发现浏览器支持  元素的边框，请随时更新这个列表。

请注意，我还尝试了其他一些方法:

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);
}

其中，以下内容可以在 Opera 9.6和10(alpha)中使用(感谢 PorneL!) :

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

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

小开

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

如果是的话，您可以包含 jquery，那么您可以

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

小开

这将工作，但只有在 IE。我在 IE8测试它。

br {


border-bottom: 1px dashed #000000;
background-color: #ffffff;
display: block;
}

小开

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

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

(注意: 如果有区别的话，我使用 IE8.0.7100(在 Win7 RC 上))

还有,

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

或者,

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

br { content: "" }

在 Chrome 2/Safari 4b 中给出了一个虚线，但是丢失了换行符(除非有人能想出一个重新引入该换行符的方法) ，这使得它不再毫无用处。

例如:。
IE8测试，Chrome/Safari 测试和另一个

小开

我自己的测试最终表明，br标记不喜欢成为 css 的目标。

但是如果你可以添加样式，那么你可能也可以添加一个脚本标记的页面的标题？链接到一个外部 .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 );
}
}

所以简而言之，它不是最优的，而是这是我的解决办法。

小开

为什么不直接用 HR 的标签？这正是你想要的。有点像当你面前的桌子上有一把勺子的时候，你试图做一把叉子来喝汤。

小开

试试下面的方法，我用另一个得票很高的答案的更新2把它们组合在一起，它对我来说非常有效:

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

小开

有一个很好的理由，您将需要样式  标记。

当它是代码的一部分时，您不想(或不能)更改，并且您希望不显示这个特定的  。

.xxx br {display:none}

可以节省很多时间，有时你的一天。

小开

这似乎解决了问题:

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

小开

我将一个  标记放入一个 标记中，并能够在 上使用 display:none;来控制何时不使用使用 Media Query 的  标记。

小开

这是一个老问题，但这是一个相当干净利落的解决方案，可能会用于那些仍然想知道它是否可行的人:) :

br{
content: '.';
display: inline-block;
width: 100%;
border-bottom: 1px dashed black;
}

通过这个修复，你也可以删除网站上的 BRs (只需将宽度设置为0px)

小开

更新于2019年9月13日:

这样设计  标记的目的是为了使换行符“更大”(即，行之间有一点额外的空间)。

“ old big”类(如下)在 Chrome 66.0.3359.181、 Firefox Quantum 60.0.2、 Edge 42.17134.1.0和 IE 11.48.17134.0中进行了测试并正常工作，以风格化  。不幸的是，它在 Chrome 76版本及其衍生产品(大约2019年8月)中被打破。其症状是行与行之间的额外空间不再显示。

“ 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;}

下面是一个演示:

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>

这是 Chrome v.76中显示的结果:

小开

这是 CSS101。

为什么让简单的事情变得如此困难? ? ? ? 为什么首先要使用 ？

在写作时按回车键，在每行文字后开始一个新的段落不是更容易吗？

通过限制填充和边距，您仍然可以让它看起来像您使用了
。然后在 CSS 中为 p 选择器设置底部边框样式。

如果您希望您的最后一行文本下面不要有一个虚线，只有在文本行之间(作为一个视觉分隔) ，只需添加一个 id 到最后一行文本的 标签，并为它编写 CSS。

点击此处查看:

p {
padding-bottom: 10px;
margin-top: 0px;
margin-bottom: 10px;
border-bottom: dashed 2px #777;
}
  

p#lastLine {
border-bottom: none;
}

<p>
This is a line of some very nice text. And mind you, this is no joke!
</p>
<p >
And this is another line of some very nice text.
</p>
<p >
And this is another line of some very nice text.
</p>
<p >
And this is another line of some very nice text.
</p>
<p id="lastLine">
And this THE LAST LINE line of some very nice text. This is great!
</p>

小开

最实用和简短的解决方案是使用不那么流行的 HTML 标记。

<style>
blockquote {margin: 7px 0px 0px 0px;}
</style>


This is my first line
<blockquote/>
Second line with a half height break

你能用 css 来定位 < br/> 吗？