用CSS忽略<br>

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

看起来整洁;-)

请参阅此处以供参考.

如上面的答案,如果你想使它特定于标签,你可以.因为如果你想要这个属性为标签的工作<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和/或类,您可以轻松地通过CSS或使用CSS选择器来定位每个单独或跨度元素的组合nth-child().

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

您还可以通过Javascript(jQuery)简单地添加/删除/切换类.

这种方法的"优点"是它的健壮性 - 适用于支持伪元素的每个浏览器(参见:我可以使用 - CSS生成的内容).

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

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

DEMO