blocks|key|551483|text|有了css，你可以“隐藏”br标签，它们不会有任何效果：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|551484|br+{
++++display:+none;
}|code-block|syntax|javascript|551485|如果你只想在特定的标题类型中隐藏一些，只需要让你的css更具体。|551486|h3+br+{
++++display:+none;
}|551487|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

With css, you can "hide" the br tags and they won't have an effect:

<pre><code>br {
 display: none;
}
</code></pre>

If you only want to hide some within a specific heading type, just make your css more specific.

<pre><code>h3 br {
 display: none;
}
</code></pre>

blocks|key|768168|text|如果在样式中添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|768169|br{
++++display:+none;
}|code-block|syntax|javascript|768170|那么这将会起作用。不过，我不确定它是否能在老版本的IE中运行。|768171|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If you add in the style

<pre><code>br{
 display: none;
}
</code></pre>

Then this will work. Not sure if it will work in older versions of IE though.

blocks|key|551761|text|我是这样做的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|551762|br+{+
++++display:+inline;
++++content:+'+';
++++clear:none;
}|code-block|syntax|javascript|551763|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is how I do it: 

<pre><code>br { 
 display: inline;
 content: ' ';
 clear:none;
}
</code></pre>

blocks|key|768509|text|对我来说，这样看起来更好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|768510|Some+text,++Some+text,++Some+text|offset|length|style|CODE|768511|​|768512|br+{
++display:+inline;
++content:+'';
}

br:after+{
++content:+',+';
++display:+inline-block;
}|code-block|syntax|javascript|768513|<div+style="display:block">
++Some+text
++ 
++Some+text
++ 
++Some+text
</div>|768514|768515|entityMap^0|0|0|X|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|Y|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|Z|8|@]|9|@]|A|$M|N]]|$1|Q|3|I|5|6|7|10|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

For me looks better like this:

<code>Some text, Some text, Some text</code>

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>br {
 display: inline;
 content: '';
}

br:after {
 content: ', ';
 display: inline-block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="display:block"&gt;
 &lt;span&gt;Some text&lt;/span&gt;
 &lt;br&gt;
 &lt;span&gt;Some text&lt;/span&gt;
 &lt;br&gt;
 &lt;span&gt;Some text&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>

blocks|key|768360|text|为此，您可以像这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|768361|br{display:+none;}|code-block|syntax|javascript|768362|如果它在一些PRE标记中，那么您可以，如果您希望PRE标记的行为类似于常规块元素，您可以使用以下CSS：|768363|pre+{white-space:+normal;}|768364|或者，您可以遵循Aneesh+Karthik+C的风格，如下所示：|offset|length|768365|br++{content:+'+'}
br:after+{content:+'+'}|768366|我想你已经明白了|768367|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/2404407/aneesh-karthik-c^0|0|0|0|0|8|G|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@$M|15|N|16|1|17]]|A|$]]|$1|O|3|P|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

For that you can just do like this:

<pre><code>br{display: none;}
</code></pre>

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><code>pre {white-space: normal;}
</code></pre>

Or you can follow the style of <a href="https://stackoverflow.com/users/2404407/aneesh-karthik-c">Aneesh Karthik C</a>
like :

<pre><code>br {content: ' '}
br:after {content: ' '}
</code></pre>

I think you got it

blocks|key|551735|text|根据您的问题，要使用Aneesh+Karthik+C方法为Firefox和Opera解决此问题，您需要添加"float“”right“属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|551736|在这里检查example。此CSS适用于Firefox+(26.0)、Opera+(12.15)、Chrome+(32.0.1700)和Safari+(7.0)|551737|br+{
+++content:+"+";++
+++float:right;+
}|code-block|syntax|javascript|551738|我希望这能回答你的问题！|551739|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/18040142/14651|1|http://jsfiddle.net/P6NZd/20/^0|A|G|0|0|5|7|1|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|F|3|G|5|H|7|14|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|15|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

As per your question, to solve this problem for Firefox and Opera using <a href="https://stackoverflow.com/a/18040142/14651">Aneesh Karthik C</a> approach you need to add "float" right" attribute.

Check the <a href="http://jsfiddle.net/P6NZd/20/" rel="nofollow noreferrer">example</a> here. This CSS works in
Firefox (26.0) , Opera (12.15), Chrome (32.0.1700) and Safari (7.0)

<pre><code>br {
 content: " "; 
 float:right; 
}
</code></pre>

I hope this will answer your question!!

blocks|key|768322|text|虽然这个问题似乎已经解决了，但在Firefox上，公认的答案并没有为我解决这个问题。Firefox+(可能还有IE，尽管我还没有尝试过)在读取"content“标签的内容时跳过空格。虽然我完全理解Mozilla为什么要这么做，但它确实也带来了一些问题。我发现最简单的解决办法是使用不可中断的空格，而不是常规的空格，如下所示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|768323|.noLineBreaks+br:before{
content:+'\a0'
}|code-block|syntax|javascript|768324|Have+a+look。|offset|length|768325|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/3HWH6/1/^0|0|0|0|B|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

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.

<pre><code>.noLineBreaks br:before{
content: '\a0'
}
</code></pre>

<a href="http://jsfiddle.net/3HWH6/1/" rel="nofollow">Have a look</a>.

blocks|key|551896|text|是的，您可以忽略此 。您可能需要它，特别是在响应式设计中，您需要删除移动设备的中断。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|551897|HTML|551898|<h2>

++Where+ever+you+go+<br+class="break">+i+am+there.

</h2>|code-block|syntax|javascript|551899|针对移动设备的CSS示例|551900|/*+Resize+the+browser+window+to+check+*/

@media+(max-width:+640px)+
{
++.break+{display:+none;}
}|551901|看看这个Codepen：|551902|https://codepen.io/fluidbrush/pen/pojGQyM|551903|entityMap|0|LINK|mutability|MUTABLE|url^0|9|4|0|0|0|0|0|0|0|15|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|16|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|18|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|19|8|@]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|U|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|T]]]]

Yes you can ignore this <code>&lt;br&gt;</code>.
You may need this especially in case of responsive design where you need to remove breaks for mobile devices.

HTML 

<pre><code>&lt;h2&gt;

 Where ever you go &lt;br class="break"&gt; i am there.

&lt;/h2&gt;
</code></pre>

CSS for mobile example 

<pre><code>/* Resize the browser window to check */

@media (max-width: 640px) 
{
 .break {display: none;}
}
</code></pre>

Check out this Codepen: 
<a href="https://codepen.io/fluidbrush/pen/pojGQyM" rel="nofollow noreferrer">https://codepen.io/fluidbrush/pen/pojGQyM</a>

blocks|key|768258|text|您可以简单地将其转换为注释。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|768259|或者你可以这样做：|768260|br+{
display:+none;
}|code-block|syntax|javascript|768261|但是如果你不想要它，为什么你要把它放在那里呢？|768262|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You can simply convert it in a comment..

Or you can do this:

<pre><code>br {
display: none;
}
</code></pre>

But if you do not want it why are you puting that there?

I'm working on a site which has line breaks inserted as <code>&lt;br&gt;</code> in some of the headings. Assuming I can't edit the source HTML, is there a way with CSS I can ignore these breaks? 

I'm mobile optimising the site so I don't really want to use JavaScript.

Ignore with CSS?

响应式设计

我在一个网站上工作，其中有一些标题中插入换行符作为 。假设我不能编辑源代码HTML，有没有办法用CSS忽略这些中断？我正在优化网站的移动端，所以我并不真的想使用JavaScript。

问用CSS忽略<br>？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用CSS忽略<br>？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用CSS忽略<br>？
EN