假装用CSS删除中断标签

Question

我一直在尝试删除由中断标记引起的换行符

我已经提出了一个适用于chrome的解决方案，但不是在firefox / IE11中。有点奇怪，如果有一个CSS唯一的解决方案，我可以在这种情况下使用，可以在大多数现代浏览器中使用：

HTML

<p>This line breaks in firefox,<br> but not chrome</p>

CSS

br {
    display: inline-block;
    content: " ";
    width: 7px;
}

JSFiddle

编辑：

1. break标记也需要像两个单词之间的空格一样。

Answer 1

我尝试了一些CSS方法，但没有一个在Firefox中工作。我建议使用一些JavaScript来帮助你。

使用jQuery或简单的JS，在每个<br>

之后插入一个spacer元素

$('br').after('<span class="spacer"></span>');

CSS：

br { display: none; }
.spacer { content: "\00a0"; }

Answer 2

使用以下标记适用于跨浏览器：

HTML

<div class="test">WORD<br>&nbsp;WITH<br>&nbsp;SPACE</div>
<div class="">WORD&nbsp;<br>WITH&nbsp;<br>SPACE</div>

CSS：

.test br{
    display: none;
}

用例是指您希望在特定媒体查询中使用标签，同时仍保留字母之间的空格。 JSFIDDLE