Question

我正在使用某些标题中以<br>插入换行符的网站。假设我无法编辑源HTML，有没有CSS的方法我可以忽略这些中断？

我正在移动优化网站，所以我真的不想使用JavaScript。

Answer 1

使用css，你可以“隐藏”br标签，它们不会产生影响：

br {
    display: none;
}

如果您只想隐藏特定标题类型中的某些内容，只需使您的css更具体。

h3 br {
    display: none;
}

Answer 2

注意：此解决方案仅适用于Webkit浏览器，它会将伪元素错误地应用于自动关闭标记。

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

例如，上述答案将转为

Monday<br>05 August

到

Monday05 August

我在尝试格式化每周活动日历时已经验证了。优选插入“星期一”之后的空格。这可以通过在CSS中插入以下内容轻松完成：

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

这将使

Monday<br>05 August

看起来像

Monday 05 August

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

Monday, 05 August

看起来整洁; - ）

请参阅here以获取参考。

如上面的答案所示，如果你想让它特定于标签，你可以。如果您希望此属性适用于代码<h3>，则只需在h3和br之前添加br:after。

它最常用于伪标签。

Answer 3

如果添加样式

br{
    display: none;
}

然后这将有效。不确定它是否适用于IE的旧版本。

Answer 4

我就是这样做的：

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

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;}

DEMO

只需将适当的span元素设置为display:block即可实现换行。

通过在HTML标记中使用ID和/或Classes，您可以轻松地通过CSS定位每个单独或跨度元素的组合，或使用nth-child()等CSS选择器。

所以你可以，例如通过使用媒体查询为响应式布局定义不同的断点。

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

这种方法的“优点”是它的健壮性 - 适用于支持伪元素的每个浏览器（参见：Can I use - CSS Generated content）。

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

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

DEMO

Answer 6

为此你可以这样做：

br{display: none;}

如果它在某个PRE标签内，那么您可以并且如果您希望PRE标签的行为类似于常规块元素，则可以使用此CSS：

pre {white-space: normal;}

或者你可以遵循Aneesh Karthik C的风格喜欢：

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

我认为你明白了

Answer 7

根据您的问题，要使用Aneesh Karthik C方法解决Firefox和Opera的这个问题，您需要在“属性”中添加“float”。

在此处查看example。这个CSS适用于 Firefox（26.0），Opera（12.15），Chrome（32.0.1700）和Safari（7.0）

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

我希望这会回答你的问题!!

Answer 8

对我来说看起来更像这样：

Some text, Some text, Some text

＆＃13;

br {
  display: inline;
  content: '';
}

br:after {
  content: ', ';
  display: inline-block;
}

＆＃13;

<div style="display:block">
  <span>Some text</span>
  <br>
  <span>Some text</span>
  <br>
  <span>Some text</span>
</div>

＆＃13;

Answer 9

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

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

Have a look

Answer 10

是的，您可以忽略此<br>。特别是在响应式设计中，您需要删除移动设备的中断时，可能会需要这样做。

HTML

<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

Answer 11

您只需在评论中对其进行转换即可。

或者你可以这样做：

br {
display: none;
}

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

用CSS忽略<br/>？

11 个答案: