使用CSS如何忽略<br>标签？

Question

我正在为一个网站工作，其中某些标题中插入了换行符<br>。 假设我无法编辑源HTML，那么是否有一种CSS方法可以忽略这些换行符？

我正在优化移动网站，因此我不想使用JavaScript。

- Evanss

---

@Ben Johnson mk2：对于你的问题：“我想要一个解决方案来解决@Aneesh Karthik C关于Firefox和Opera的答案”，我的回答是，使用br元素是不可能的！原因已经被解释了无数次！在我的答案中，我向你展示了一种替代方法，以有效、健壮并且跨浏览器地实现目标。 - Netsurfer

Answer 1

CSS可以“隐藏”br标签，使其不产生效果：

br {
    display: none;
}

如果你只想隐藏某个特定标题类型中的一些内容，只需让你的CSS更具体即可。

h3 br {
    display: none;
}

- enobrev

---

请确保也查看Aneesh的回答，它与enobrev的回答有关且修复了enobrev没有考虑到的问题。 - Rick Calder

同意，Aneesh的回答非常棒。https://dev59.com/YWsz5IYBdhLWcg3w47-m#18040142 - enobrev

这个解决方案在Firefox上不起作用。如果<b/>周围没有空格，则会将<b/>周围的单词组合在一起。这是[示例]（http://jsfiddle.net/P6NZd/28/）您可以在[下面的讨论](https://dev59.com/YWsz5IYBdhLWcg3w47-m#21754314)中看到相关信息。 - shinesecret

如果你的目标是响应式设计，则@Netsurfer的解决方案是唯一的跨浏览器解决方案。虽然它没有完全回答所述问题，但它确实可以在所有现代浏览器中实现目标。 - Andrew Lundin

Answer 2

注意：此解决方案仅适用于Webkit浏览器，在自闭合标签上错误地应用伪元素。

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

例如，上述答案会将

Monday<br>05 August

至

Monday05 August

当我试图格式化我的每周事件日历时，我已经验证过："Monday"后面插入一个空格是更好的。可以通过在CSS中插入以下内容来轻松实现：

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

这将会使得

Monday<br>05 August

看起来像

Monday 05 August

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

Monday, 05 August

看起来很整洁;-)

参考此处。

如前面的答案所述，如果您想使其针对特定标签有效，则可以执行。例如，如果您希望该属性适用于标签<h3>，只需在br和br:after之前添加一个h3即可。

它最常用于伪标签。

- Karthik C

---

非常非常的天才！ - jon

做得好，实际上考虑到了仅仅禁用它的后果！ - Rick Calder

这个观点不错，但这似乎只适用于Webkit浏览器（Chrome和Safari），在Firefox和IE中，这种技术不起作用，请使用Firefox和IE查看http://jsfiddle.net/nicooprat/ZHxNA/...有什么想法如何将换行符替换为空格，以便在所有主要浏览器中都能工作？ - firepol

实际上，Firefox和IE做的是“正确的”，因为 <br /> 是一个伪元素不应该使用的元素之一。而 content 只能用于伪元素。 - ScottS

这个解决方案非常错误，主要是因为@ScottS已经指出了原因。 "Content"只应该与伪元素一起使用，而伪元素不应该与自闭合标签一起使用。现在可能有效，但我不敢称其为具备未来性的解决方案。 - nd_macias

Answer 3

如果你添加了样式

br{
    display: none;
}

那么这将起作用。不确定它是否适用于较旧版本的IE。

- Tim B James

---

这篇文章之前发布过，但投票数较少，为什么？ - Mr_Green

有时候，我们只是被忽略了 ;( - Tim B James

@TimBJames，在火狐浏览器中无法正常工作，您可以查看我的详细评论上文链接。 - shinesecret

Answer 4

这是我的做法：

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

- Neo

---

它在MacOS上的Safari 16上无法工作，我刚试过了。我即将放弃，并根据Netsurfer的建议将br替换为span。 - revelt

Answer 5

你可以使用 span 元素代替 br，如果你想要使用空格方法，因为它依赖于伪元素，而这些元素对于替换元素是“未定义”的。 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

span {white-space: pre;}

span:after {content: ' ';}

span.line-break {display: block;}

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

演示

通过将适当的 span 元素设置为 display:block，可以轻松实现换行。

在 HTML 标记中使用 ID 和/ 或类，您可以轻松地通过 CSS 对每个单独的 span 元素或组合进行定位，或者使用 CSS 选择器如 nth-child()。

因此，您可以使用媒体查询为响应式布局定义不同的断点。

你也可以通过 Javascript (jQuery) 简单地添加/ 删除/ 切换类。

这种方法的“优势”是其稳健性-适用于支持伪元素的所有浏览器（请参阅：Can I use - CSS Generated content）。

作为替代方案，还可以通过伪元素添加换行：

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

DEMO

- Netsurfer

---

你有没有错过这个问题的一部分：“假设我无法编辑源HTML代码？” - ScottS

@ScottS：不，我没有。也许你错过了这部分：“我想要一个解决方案，适用于Firefox和Opera的@Aneesh Karthik C的答案”（因为开始悬赏的人不是OP）。而对于这个问题的答案是，使用<br>是不可能的，至少不是跨浏览器的。所以我展示了一种替代方法。 - Netsurfer

不，我没有错过那部分（即OP与悬赏的重点以及Aneesh的答案）。但是Aneesh的答案是在整个问题的背景下给出的，“使用CSS忽略<br>？”显然，如果一个人实际控制了HTML，那么简单地“删除”<br>元素就可以解决这个问题（可能用空格替换它们）。因此，整个问题所关注的问题是当一个人“无法控制HTML”时；并且由于额外的规定，他们真的不想使用JavaScript（出于任何原因）来解决它。 - ScottS

“如何使用CSS忽略<br>标签？”这个问题已经有了答案。即使您控制HTML，也不意味着您想要更改它。但在响应式设计中，通常希望控制换行（而不是自动换行）。在这种情况下，通过CSS（媒体查询）控制空格或不控制空格的方法至少是实现目标的“一种方法”。 - Netsurfer

这对我来说效果更好，因为上述解决方案在Firefox中不再适用。 - Christos Hrousis

Answer 6

我觉得这样看起来更好:

一些文字，一些文字，一些文字

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>

- Ruslan P

Answer 7

你可以这样做：

For that you can just do like this:

br{display: none;}

如果它在某个 PRE 标签中，那么你可以这样做。如果你想让 PRE 标签像常规块元素一样运作，可以使用以下 CSS：

pre {white-space: normal;}

或者你可以像Aneesh Karthik C那样遵循风格：

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

我认为你明白了

- dawadisuren

---

我认为你忽略了伪元素（如::before和::after）对于像br这样的"替换元素"来说至少是"未定义"的事实。因此，你永远无法依赖一致的浏览器行为！你唯一能做的就是不要在这些元素上使用伪元素！ - Netsurfer

Answer 8

根据你的问题，在Firefox和Opera中使用Aneesh Karthik C的方法解决此问题，需要添加"float:right"属性。

在这里检查示例。这个CSS适用于 Firefox(26.0)、Opera(12.15)、Chrome(32.0.1700)和Safari(7.0)。

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

我希望这可以回答你的问题！

- shinesecret

---

我不仅仅是非常认真地阅读了问题，还阅读了所有的答案和评论。br标签的内容属性简直就是胡说八道！而且我仍然看不出你的回答与“条件空格和换行符”有什么关系？也许你可以再进一步解释一下？ - Netsurfer

你的例子有误导性，因为br元素周围已经有空格了。如果你删除这些空格，你会发现添加任何空格都不起作用。（http://jsfiddle.net/P6NZd/21/） - ScottS

在你的例子中，你有三个带有空格的br元素，第一个和最后一个之前都有空格。正是这些空格使得你的解决方案看起来是有效的，但实际上并不是这样。当你去掉那些空格时，就像我在修改后的例子中所做的那样，你会发现你的解决方案在Firefox中根本没有添加任何空格。 - ScottS

我同意你的看法，@ScottS。如果你尝试上面那个被接受的答案，即使这样也不会起作用。因为在Firefox中，<br>标签的content属性根本不起作用，当我们使用float:right时，它只会连接第一个和第二个单词。 - shinesecret

是的，这正是设立悬赏的目的。那个人希望有人能提供一个可以解决这个问题的解决方案。Aneesh的答案只适用于Webkit浏览器。 - ScottS

Answer 9

你可以使用display:contents。

br {
  display:contents;
}

请查看https://developer.mozilla.org/zh-CN/docs/Web/CSS/display-box

[display:contents;] 这些元素本身不会产生特定的框。它们被伪框和其子框所替代[...] 大多数浏览器将从可访问性树中删除具有内容显示值的元素。[...] 不再被屏幕阅读技术宣布。

- Mkdgs

---

截至2022年，浏览器仍然部分支持display:contents。 - Nivethan

截至2022年，浏览器仍然部分支持display:contents。 - Nivethan

@Nivethan，是的，部分支持但没有相关问题。它可以工作。 - Mkdgs

Answer 10

虽然这个问题似乎已经解决了，但是被接受的答案在Firefox上并没有解决我的问题。 Firefox（以及可能的IE，尽管我没有尝试过）在读取“content”标签的内容时会跳过空格。虽然我完全理解Mozilla为什么要这样做，但它确实带来了一些问题。 我找到的最简单的解决方法是使用不间断空格而不是常规空格，如下所示。

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

看一下吧。

- Santo Guevarra

---

为什么你的 fiddle 上没有 before 元素在 br 上？你甚至在 fiddle 的 html 中都没有 br。问题的一部分是 before 在某些浏览器上无法在 br 上使用。 - ScottS

这是非常预期的行为，正如规范中所述：2.5.1 常见解析器惯用语。 - Netsurfer

这确实很奇怪，当我在我的项目中应用它时，它可以工作。不过我的文本并不全是HTML，我要修改的内容来自数据库。 很抱歉我的回答没有帮到你。 - Santo Guevarra