用 CSS 忽略 < br > ？

我的工作在一个网站，有行插入作为 <br>在一些标题。假设我不能编辑源代码 HTML，有没有一种方法可以忽略 CSS 中的这些断点呢？

我正在手机上优化网站，所以我并不真的想使用 JavaScript。

121415 次浏览
小开

如果您添加样式

br{
display: none;
}

然后这将工作。不知道它是否会工作在旧版本的 IE 虽然。

小开
最佳答案

使用 css，你可以“隐藏”br 标签，它们不会产生任何效果:

br {
display: none;
}

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

h3 br {
display: none;
}
小开

注意: 这个解决方案只适用于 Webkit 浏览器，它不正确地将伪元素应用于自闭标记。

作为上述答案的增编，值得注意的是，在某些情况下，需要插入一个空格，而不仅仅是忽略 <br>:

例如，上面的答案会转向

Monday<br>05 August

到

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:

br  {
content: ' '
}
br:after {
content: ' '
}

这会让

Monday<br>05 August

看起来像

Monday 05 August

如果您想用逗号分隔，可以将 br:after中的 content属性更改为 ', '，或者在 ' '中放置您想要的任何内容以使其成为分隔符！顺便说一句

Monday, 05 August

看起来很整洁; -)

有关参考资料，请参阅 给你。

与上面的答案一样，如果您希望使其特定于标记，那么可以这样做。例如，如果希望此属性在标记 <h3>中工作，只需在 br和 br:after之前各添加一个 h3即可。

它通常适用于伪标记。

小开

如果希望空白方法工作，可以使用 span元素而不是 br，因为它依赖于替换元素“未定义”的伪元素。

超文本标示语言

<p>
To break lines<span class="line-break">in a paragraph,</span><span>don't use</span><span>the 'br' element.</span>
</p>

CSS

span {white-space: pre;}


span:after {content: ' ';}


span.line-break {display: block;}


span.line-break:after {content: none;}

演示

只需将合适的 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().

因此，你可以通过使用媒体查询来定义不同的断点。

And you can also simply add/ remove/ toggle classes by Javascript (jQuery).

The "advantage" of this method is its robustness - works in every browser that supports pseudo-elements (see: 我可以使用-CSS 生成的内容).

As an alternative it is also possible to add a line break via pseudo-elements:

span.break:before {
content: "\A";
white-space: pre;
}

演示

小开

你可以简单地在注释中转换它. 。

或者你可以这样做:

br {
display: none;
}

但是如果你不想要，为什么要把它放在那里？

小开

虽然这个问题看起来已经解决了，但是这个被接受的答案并没有解决我在 Firefox 上遇到的问题。 Firefox (可能还有 IE，虽然我还没有试过)在阅读“ content”标签的内容时会跳过空格。尽管我完全理解 Mozilla 为什么要这么做，但它确实带来了一些问题。 我发现最简单的解决办法是使用不可破解的空格，而不是下面所示的常规空格。

.noLineBreaks br:before{
content: '\a0'
}

看看。

小开

你可以这样做:

br{display: none;}

如果它在某个 PRE 标记中，那么你可以，如果你想让 PRE 标记表现得像一个普通的块元素，你可以使用这个 CSS:

pre {white-space: normal;}

或者你可以遵循 Aneesh Karthik C 的风格 例如:

br  {content: ' '}
br:after {content: ' '}

我想你明白了

小开

As per your question, to solve this problem for Firefox and Opera using Aneesh Karthik C approach you need to add "float" right" attribute.

检查这里的 例子。这个 CSS 工作在 Firefox (26.0) ，Opera (12.15) ，Chrome (32.0.1700)和 Safari (7.0)

br {
content: " ";
float:right;
}

我希望这能回答你的问题! ！

小开

我是这么做的:

br {
display: inline;
content: ' ';
clear:none;
}
小开

对我来说，这样看起来更好:

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>

小开

是的，你可以忽略这个 <br>。 您可能需要这一点，特别是在响应式设计的情况下，您需要删除移动设备的中断。

超文本标示语言

<h2>


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


</h2>

移动设备的 CSS 示例

/* Resize the browser window to check */


@media (max-width: 640px)
{
.break {display: none;}
}

看看这个 Codepen:
Https://codepen.io/fluidbrush/pen/pojgqym

小开

你可以用 display:contents

br {
display:contents;
}

见 https://developer.mozilla.org/en-US/docs/Web/CSS/display-box

[ display: content; ]这些元素不会自己生成一个特定的盒子。它们被替换为它们的伪框和子框[ ... ] ，大多数浏览器都会从可访问性树中删除任何具有内容显示值的元素。[ ... ]不再由屏幕阅读技术宣布。


提交答案