忽略CSS？

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

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

使用css，您可以“隐藏” br标签，它们不会起作用：

br {
    display: none;
}

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

h3 br {
    display: none;
}

注意：此解决方案仅适用于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

看起来很整洁;-)

请参阅此处以获取参考。

与上述答案一样，如果要使其特定于标签，则可以。就像您希望该属性用于tag一样<h3>，只需h3在br和之前添加一个each即可br:after。

它最常用于伪标签。

如果您添加样式

br{
    display: none;
}

然后这将起作用。虽然不确定它是否可以在IE的旧版本中使用。

这是我的方法：

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

如果希望空白方法起作用，则可以使用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）轻松添加/删除/切换类。

这种方法的“优势”在于它的鲁棒性-在支持伪元素的每种浏览器中都可以使用（请参阅：我可以使用-CSS生成的内容）。

或者，也可以通过伪元素添加换行符：

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

演示

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

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{display: none;}

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

pre {white-space: normal;}

或者，您可以遵循Aneesh Karthik C的样式， 例如：

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

我想你明白了

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

在此处查看示例。该CSS可在Firefox（26.0），Opera（12.15），Chrome（32.0.1700）和Safari（7.0）中使用

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

我希望这能回答您的问题！

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

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

看看吧。

是的，您可以忽略这一点<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

您只需将其转换为评论即可。

或者您可以这样做：

br {
display: none;
}

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