使用 CSS 忽略 <br>？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7596647/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ignore <br> with CSS?
提问by Evanss
I'm working on a site which has line breaks inserted as <br>in some of the headings. Assuming I can't edit the source HTML, is there a way with CSS I can ignore these breaks?
我正在一个网站上工作，该网站<br>在某些标题中插入了换行符。假设我无法编辑源 HTML，有没有办法使用 CSS 忽略这些中断？
I'm mobile optimising the site so I don't really want to use JavaScript.
我正在移动优化网站，所以我真的不想使用 JavaScript。
回答by enobrev
With css, you can "hide" the br tags and they won't have an effect:
使用 css，您可以“隐藏” br 标签，它们不会产生任何效果：
br {
display: none;
}
If you only want to hide some within a specific heading type, just make your css more specific.
如果你只想在特定的标题类型中隐藏一些，只需让你的 css 更具体。
h3 br {
display: none;
}
回答by Karthik C
Note: This solution only works for Webkit browsers, which incorrectly apply pseudo-elements to self-closing tags.
注意：此解决方案仅适用于 Webkit 浏览器，该浏览器错误地将伪元素应用于自关闭标签。
As an addendum to above answers it is worth noting that in some cases one needs to insert a space instead of merely ignoring <br>:
作为上述答案的补充，值得注意的是，在某些情况下，需要插入一个空格而不是仅仅忽略<br>：
For instance the above answers will turn
例如上面的答案会变成
Monday<br>05 August
to
到
Monday05 August
as I had verified while I tried to format my weekly event calendar. A space after "Monday" is preferred to be inserted. This can be done easily by inserting the following in the CSS:
正如我在尝试格式化每周活动日历时所验证的那样。最好在“星期一”之后插入一个空格。这可以通过在 CSS 中插入以下内容轻松完成：
br {
content: ' '
}
br:after {
content: ' '
}
This will make
这将使
Monday<br>05 August
look like
看起来像
Monday 05 August
You can change the contentattribute in br:afterto ', 'if you want to separate by commas, or put anything you want within ' 'to make it the delimiter! By the way
您可以更改content的属性br:after来', '，如果你想用逗号分隔，或把你想要的任何部件' '，使其分隔符！顺便一提
Monday, 05 August
looks neat ;-)
看起来很整洁;-)
See herefor a reference.
请参阅此处以获取参考。
As in the above answers, if you want to make it tag-specific, you can. As in if you want this property to work for tag <h3>, just add a h3each before brand br:after, for instance.
正如上面的答案，如果你想让它特定于标签，你可以。例如，如果您希望此属性适用于 tag <h3>，只需h3在brand之前添加一个each br:after。
It works most generally for a pseudo-tag.
它最常用于伪标签。
回答by Tim B James
If you add in the style
如果在样式中添加
br{
display: none;
}
Then this will work. Not sure if it will work in older versions of IE though.
然后这将起作用。不确定它是否适用于旧版本的 IE。
回答by Neo
This is how I do it:
这就是我的做法：
br {
display: inline;
content: ' ';
clear:none;
}
回答by Netsurfer
You can use spanelements instead of the brif you want the white space method to work, as it depends on pseudo-elements which are "not defined" for replaced elements.
如果您希望空白方法工作，您可以使用span元素而不是br，因为它取决于为替换元素“未定义”的伪元素。
HTML
HTML
<p>
To break lines<span class="line-break">in a paragraph,</span><span>don't use</span><span>the 'br' element.</span>
</p>
CSS
CSS
span {white-space: pre;}
span:after {content: ' ';}
span.line-break {display: block;}
span.line-break:after {content: none;}
The line break is simply achieved by setting the appropriate span element to display:block.
可以通过将适当的 span 元素设置为 来简单地实现换行display:block。
By using IDs and/ or Classes in your HTML markup you can easily target every single or combination of span elements by CSS or use CSS selectors like nth-child().
通过在 HTML 标记中使用 ID 和/或类，您可以轻松地通过 CSS 或使用 CSS 选择器（如nth-child().
So you can e.g. define different break points by using media queries for a responsive layout.
因此，您可以通过使用媒体查询为响应式布局定义不同的断点。
And you can also simply add/ remove/ toggle classes by Javascript (jQuery).
您还可以通过 Javascript (jQuery) 简单地添加/删除/切换类。
The "advantage" of this method is its robustness - works in every browser that supports pseudo-elements (see: Can I use - CSS Generated content).
这种方法的“优点”是它的健壮性 - 适用于支持伪元素的每个浏览器（请参阅：我可以使用 - CSS 生成的内容）。
As an alternative it is also possible to add a line break via pseudo-elements:
作为替代，也可以通过伪元素添加换行符：
span.break:before {
content: "\A";
white-space: pre;
}
回答by Ruslan P
For me looks better like this:
对我来说，这样看起来更好：
Some text, Some text, Some text
Some text, Some text, Some text
br {
display: inline;
content: '';
}
br:after {
content: ', ';
display: inline-block;
}<div style="display:block">
<span>Some text</span>
<br>
<span>Some text</span>
<br>
<span>Some text</span>
</div>回答by dawadisuren
For that you can just do like this:
为此，您可以这样做：
br{display: none;}
and if it is inside some PRE tag, then you can and if you want the PRE tag to behave like a regular block element, you can use this CSS :
如果它在某个 PRE 标签内，那么你可以，如果你想让 PRE 标签表现得像一个普通的块元素，你可以使用这个 CSS：
pre {white-space: normal;}
Or you can follow the style of Aneesh Karthik Clike :
或者你可以遵循Aneesh Karthik C的风格， 比如：
br {content: ' '}
br:after {content: ' '}
I think you got it
我想你明白了
回答by shinesecret
As per your question, to solve this problem for Firefox and Opera using Aneesh Karthik Capproach you need to add "float" right" attribute.
根据您的问题，要使用Aneesh Karthik C方法为 Firefox 和 Opera 解决此问题，您需要添加“浮动”权利”属性。
Check the examplehere. This CSS works in Firefox (26.0) , Opera (12.15), Chrome (32.0.1700) and Safari (7.0)
检查这里的例子。此 CSS 适用于 Firefox (26.0)、Opera (12.15)、Chrome (32.0.1700) 和 Safari (7.0)
br {
content: " ";
float:right;
}
I hope this will answer your question!!
我希望这能回答你的问题！！
回答by fluidbrush
Yes you can ignore this <br>.
You may need this especially in case of responsive design where you need to remove breaks for mobile devices.
是的，您可以忽略这一点<br>。您可能需要这样做，尤其是在需要删除移动设备中断的响应式设计中。
HTML
HTML
<h2>
Where ever you go <br class="break"> i am there.
</h2>
CSS for mobile example
移动端 CSS 示例
/* Resize the browser window to check */
@media (max-width: 640px)
{
.break {display: none;}
}
Check out this Codepen:
https://codepen.io/fluidbrush/pen/pojGQyM
查看此 Codepen：https://codepen.io/fluidbrush/pen/pojGQyM
回答by Santo Guevarra
While this question appears to already have been solved, the accepted answer didn't solve the problem for me on Firefox. Firefox (and possibly IE, though I haven't tried it) skip whitespaces while reading the contents of the "content" tag. While I completely understand why Mozilla would do that, it does bring its share of problems. The easiest workaround I found was to use non-breakable spaces instead of regular ones as shown below.
虽然这个问题似乎已经解决了，但接受的答案并没有解决我在 Firefox 上的问题。Firefox（可能还有 IE，虽然我还没有尝试过）在读取“content”标签的内容时会跳过空格。虽然我完全理解为什么 Mozilla 会这样做，但它确实带来了一些问题。我发现的最简单的解决方法是使用不可破坏的空格而不是常规空格，如下所示。
.noLineBreaks br:before{
content: '\a0'
}
看看。
