html - 你可以
用css定位吗？

Question

 是否可以使用 CSS定位换行标记？

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

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

score 174 · Accepted Answer

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

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

看来，它已经在其他论坛上讨论过了。摘自Re：使用 CSS 设置 BR 元素的高度：

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

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

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

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

更新

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

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

score 57 · Accepted Answer

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

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

score 33 · Accepted Answer

您需要为 标签设置样式有一个很好的理由。

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

.xxx br {display:none}

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

score 22 · Accepted Answer

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

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

不起作用。

它已经在 IE 6、7 和 8、Firefox 2、3 和 3.5B4、Safari 3 和 4 for Windows、Opera 9.6 和 10（alpha）和 Google Chrome（版本 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;
}

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

score 11 · Accepted Answer

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

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

（注意我使用的是 IE 8.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 测试等

score 10 · Accepted Answer

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

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

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

score 5 · Accepted Answer

2019 年 9 月 13 日更新：

像这样设置标签样式的目的 是为了做一个“更大”的换行符（即，在行之间留出一点额外的空间）。

"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 月）中崩溃了。症状是不再显示行之间的额外空间。

“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 中显示的结果：

score 2 · Accepted Answer

我自己的测试最终表明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 );
    }
}

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

score 1 · Accepted Answer

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

所以，你需要：

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

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

score 1 · Accepted Answer

老问题，但这是一个非常整洁和干净的解决方案，可能会用于仍然想知道是否可能的人:)：

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

通过此修复，您还可以删除网站上的 BR（只需将宽度设置为 0px）

score 1 · Accepted Answer

这似乎解决了这个问题：

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

score 0 · Accepted Answer

这将有效，但仅在 IE 中有效。我在IE8中测试过。

br {

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

score 0 · Accepted Answer

我将 标签放入标签中，并且能够使用媒体查询display:none;来控制何时不使用标签。 

score 0 · Accepted Answer

这是 CSS 101。

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

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

您仍然可以通过限制内边距和边距使其看起来像您使用过的 。然后在 CSS 中为 p 选择器设置下边框样式。

如果您希望最后一行文本下面没有虚线，仅在文本行之间（作为视觉分隔），只需在

仅最后一行文本的标签，并为其编写 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>

score -2 · Accepted Answer

为什么不直接使用 HR 标签？它完全符合您的要求。有点像当你面前的桌子上有勺子时试图做一个叉子来吃汤。

html - 你可以用css定位吗？

15 回答 15

Related

Reference

html - 你可以
用css定位吗？