当前位置： 文江博客话题详情

你能瞄准
> 用CSS？

发布于 2024-07-22 09:58:19 字数 160 浏览 15 评论 0原文

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

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

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

原文

Is it possible to target the line-break <br/> tag with 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.

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（17）

ら栖息 2024-07-29 09:58:19

从技术上讲，是的，您可以直接使用 CSS 定位
元素，或者通过向其应用一个类并定位该类。 话虽这么说，
会生成一个换行符，而且它只是一个换行符。 由于此元素没有内容，因此只有少数样式可以应用于它，例如 清除或位置。 您可以设置
的边框，但您不会看到它，因为它没有视觉维度。

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

貌似其他论坛已经讨论过了。 摘自回复：使用 CSS 设置 BR 元素的高度：

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

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

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

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

pelms 做了一些进一步的调查，并指出 IE8 (在 Win7 上）和 Chrome 2/Safari 4b 允许您对 BR 进行某种样式设置。 事实上，我检查了 IE 演示页面 < a href="http://ipinfo.info/netrenderer/" rel="noreferrer">IE Net Renderer 的 IE8 引擎，它工作了。

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

Technically, yes, you can target a <br> element with CSS directly or by applying a class to it and targeting the class. That being said, a <br> generates 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 clear or position. You can set <br>'s border but you won't see it as it has no visual dimension.

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

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

[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.

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

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.

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

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

c69 made some further investigations, and it turns out you can style the marker for br quite heavily (though, not cross-browser), yet this will not affect the line-break itself, because it seem to belong to parent container.

回复 原文
策马西风 2024-07-29 09:58:19

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

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

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

br
{   content: "A" !important;
    display: block !important;
    margin-bottom: 1.5em !important;
}
回复 原文
锦欢 2024-07-29 09:58:19

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

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

.xxx br {display:none}

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

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

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.

.xxx br {display:none}

Can save a lot of time and sometimes your day.

回复 原文
云醉月微眠 2024-07-29 09:58:19

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

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

不起作用。

它已在 IE 6、7 和 IE 中进行了测试。 8、火狐2、3& 3.5B4、Safari 3 和 4 适用于 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;
}

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

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.

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

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.

回复 原文
为你拒绝所有暧昧 2024-07-29 09:58:19
br { padding: 1px 8px; border-bottom: 1px dashed #000 }

在 IE8 中呈现如下所示...但仅在一种浏览器中使用不多。

IE 8屏幕截图

（注意，我使用的是 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 测试 和 另一个

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

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

IE 8 screenshot

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

Also,

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

or,

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

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.

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

回复 原文
莫多说 2024-07-29 09:58:19

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

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

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

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

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

<script language="javascript">
$(document).ready(function() {
    $('br').append('<span class="myclass"></span>');
});
</script>
回复 原文
酒儿 2024-07-29 09:58:19

更新于 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 和 Palemonon 中经过测试并正常工作：

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 <br> tag here:<br>
 and a line break forced by a <br class=oldbig> tag here:<br class=oldbig>
 and a line break forced by a <br class=newbig> tag here:<br class=newbig>
 This is the next line after the <br class=newbig> tag (but still 
 part of the same paragraph).</p>
<p style="max-width:20em">And this is another paragraph, entirely.</p>

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

屏幕截图

UPDATED 9/13/2019:

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).

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 <br>. 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.

The "newbig" class is tested and working properly in current versions of Chrome (76.0.3809.132), Opera, Firefox, Edge, IE, Brave, and 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 <br> tag here:<br>
 and a line break forced by a <br class=oldbig> tag here:<br class=oldbig>
 and a line break forced by a <br class=newbig> tag here:<br class=newbig>
 This is the next line after the <br class=newbig> 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:

screenshot

回复 原文
笑咖 2024-07-29 09:58:19

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

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

My own tests conclusively show that br tags do not like to be targeted for css. (still true in Safari in 2023)

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 .js that does something like this:

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

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

回复 原文
冰葑 2024-07-29 09:58:19

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

因此，您需要：

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

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

BR is an inline element, not a block element.

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.

回复 原文
甜扑 2024-07-29 09:58:19

这似乎解决了问题：

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

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>
回复 原文
小梨窩很甜 2024-07-29 09:58:19

老问题，但这是一个非常整洁和干净的修复，可能会被那些仍然想知道它是否可能的人使用:)：

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

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

old question but this is a pretty neat and clean fix, might come in use for people who are still wondering if it's possible :):

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

with this fix you can also remove BRs on websites ( just set the width to 0px )

回复 原文
绻影浮沉 2024-07-29 09:58:19

这可以工作，但仅限于 IE。 我在IE8下测试过。

br {

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

This will work, but only in IE. I tested it in IE8.

br {

  border-bottom: 1px dashed #000000;
  background-color: #ffffff;
  display: block;
  }
回复 原文
第七度阳光i 2024-07-29 09:58:19

我将
标记放入 标记中，并能够在 上使用 display:none; 控制何时不使用媒体查询的
标记。

I placed a <br> tag into a <span> tag and was able to use display:none; on the <span> to control when not to use the <br> tag using Media Queries.

回复 原文
因为看清所以看轻 2024-07-29 09:58:19

最实用、最简短的解决方案是使用不太流行的 HTML 标签。

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

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

The most practical and short solution is to use not so popular HTML tag .

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

This is my first line
<blockquote/>
Second line with a half height break
回复 原文
孤独难免 2024-07-29 09:58:19

使用

跳过固定高度。 语义是正确的。 将 p 设置为您想要的高度：p {margin-bottom: 1rem}。 .5rem 的工作方式类似于
，1rem 看起来适合正常行间距。 根据需要从那里增加。 仅保留
用于换行符。

Use <p></p> to skip a fixed height. The semantics are right. Style the p for the height you wish: p {margin-bottom: 1rem}. .5rem works like <br>, 1rem looks good for normal line spacing. Increase from there as desired. Reserve <br> for line breaks only.

回复 原文
狼性发作 2024-07-29 09:58:19

这就是CSS 101。

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

写作时按 Enter/Return 并在每行文本后开始一个新段落不是更容易吗？

您仍然可以让它看起来像您使用的 < /br> 通过限制填充和边距。 然后在 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>

This is CSS 101.

Why make simple things so difficult???? Why use
in the first place?

Isn't it just much easier to press enter/return while writing, and just start a new paragraph after each line of text?

You can still make it look like you used < /br> by limiting the padding and margins. Then set a bottom border style to the p selector in CSS.

If you want your last line of text not to have a dashed line under it, only in between the text lines (as a visual separation), simply add an id to the

tag of the last line of text only, and write the CSS for it.

View here:

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>

回复 原文
北笙凉宸 2024-07-29 09:58:19

为什么不直接使用 HR 标签呢？ 它正是为您想要的而制作的。 有点像当你面前的桌子上有一把勺子时，你试图制作一把叉子来喝汤。

Why not just use the HR tag? It's made exactly for what you want. Kinda like trying to make a fork for eating soup when there's a spoon right in front of you on the table.

回复 原文
~没有更多了~

关于作者

放我走吧

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

15077827184

文章 0 评论 0

遗失的美好

文章 0 评论 0

离不开的别离

文章 0 评论 0

3857621955

文章 0 评论 0

懒猫

文章 0 评论 0

洋洋洒洒

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文