你能用CSS定位<br />吗？

Question

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

每次有一个换行符时我想要一条1px的虚线.我使用自己的CSS自定义网站,无法更改设置的HTML,否则我会使用其他方式.

我不认为这是可能的,但也许有人知道的方式.

Answer 1

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

如果你想在视觉上分开两个句子,那么你可能想要使用专门用于此目标的水平标尺.既然你不能改变标记,我恐怕只使用CSS你无法实现这一点.

看起来,它已经在其他论坛上讨论过了.从Re中提取:使用CSS设置BR元素的高度:

[T]他导致BR有点奇怪的状态,一方面它不被视为普通元素,而是作为生成内容中的\ A的实例,但另一方面它被视为一个普通的元素(有限的子集)允许CSS属性.

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

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

格兰特瓦格纳的测试表明,没有办法BR像你可以用其他元素做的那样.还有一个在线网站,您可以在浏览器中测试结果.

更新

pelms做了一些进一步的调查,并指出 IE8(在Win7上)和Chrome 2/Safari 4b可以让你BR有点风格.事实上,我使用IE Net Renderer的IE8引擎检查了IE演示页面,但它确实有效.

更新2 C69做了一些进一步的调查,而且事实证明,你可以样式标记为br相当严重(虽然不是跨浏览器),但是这不会影响断行本身,因为它似乎属于父容器.

Answer 2

尝试以下方法,我使用另一个高回报率的回复2将它放在一起,它对我来说非常有用:

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

Answer 3

您需要为<br>标签设置样式有一个很好的理由.

如果它是您不希望(或不能)更改的代码的一部分,并且您希望<br>不显示此特定内容.

.xxx br {display:none}

可以节省很多时间,有时也可以节省一天.

Answer 4

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

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

不起作用.

它已在IE 6,7和8,火狐2,3&3.5B4,Safari浏览器3和4为Windows,歌剧9.6&10(阿尔法)和谷歌浏览器(版本2)进行了测试,并没有以任何的工作他们.如果将来有人发现某个浏览器确实支持某个<br>元素的边框,请随时更新此列表.

还要注意我尝试了很多其他的东西:

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

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

Answer 5

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

如果是这样,你可以包括jquery,那么你可以做

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

Answer 6

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测试和其他测试

Answer 7

我自己的测试最终表明br标签不喜欢成为 CSS 的目标。（2023 年 Safari 中仍然如此）

但是，如果您可以添加样式，那么您也许还可以在页面标题中添加一个 scrip 标签？.js链接到执行类似操作的外部：

function replaceLineBreaksWithHorizontalRulesInElement( element )
{
    const brs = element.querySelectorAll( 'br' );
    for ( let br of brs )
    {
        const hr = document.createElement( 'hr' );
        br.parentNode.replaceChild( hr, br );
    }
}

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

Answer 8

2019 年 9 月 13 日更新：

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

“oldbig”类（如下）已在 Chrome 66.0.3359.181、Firefox Quantum 60.0.2、Edge 42.17134.1.0 和 IE 11.48.17134.0 中测试并正常工作，以将<br>. 不幸的是，它在 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: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;}

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

Answer 9

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

所以，你需要：

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

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