是否有一种只使用CSS就能阻止<br>标签换行的方法？
我尝试了br{display:none}，虽然它是有效的，但它也去掉了两个单词之间的空格，而这个空格是我需要保留的。
这仅适用于Webkit（iPhone），因此任何CSS3特效都可以。
我无法编辑CMS中的内容，因此简单地删除该标签对我来说不是一个选项。
谢谢！
7个回答
24
继续之前的回答，这样可以防止<br>标签在Chrome和IE中断裂:
br {
content: " ";
display: none;
}
- Shane Kenyon
6
3但它不会插入任何空格。 - acme
3您是在HTML中在
<br>标签之前或之后加了一个空格，对吗？因此，Foo<br>bar将显示为Foobar，但Foo <br>bar将显示为Foo bar。奇怪的是，在IE浏览器中，Foo<br> bar不能保留空格。 - Shanerk1是的，但是OP提到他实际上想将
<br>转换为空格，而您的解决方案并没有做到这一点。此外，content属性仅适用于before和after伪元素。 - acme也许根据这里的各种评论，目前还不可能。无论它是否100％兼容，我可以向您保证，此CSS已在跨浏览器中进行了测试并正常工作，以防止发生换行。 - Shanerk
1所需的解决方案是“用空格替换 <br />”，但很遗憾，这个解决方案并没有实现。 - Ejaz
问题的标题是“使用CSS停止BR标签断裂”，而这个解决方案绝对可以解决这个问题。 - Shanerk
11
这对我行得通：
br {content: ""}
br:after {content: "\00a0"}
- Ian McLaughlin
8
好的，经过一些尝试，我找到了一个解决方案，现在和大家分享。看起来完全可以使用CSS来完全控制
<br>标签。
button br{content:" ";border:1px solid #fff;background:red;padding:50px;}/* 你喜欢的任何样式 */
button br:after{content:" ";}
HTML代码如下：
<button>烦人的<br/>标签已经消失，留下可控制的空间</button>
不确定这在所有浏览器中是否都适用，但在WebKit和iPhone中可以正常工作，目前对我来说已经足够了。- NathanBarley
1
1+1 尽管这不是跨浏览器的，但似乎 OP 正在寻找适用于 WebKit 浏览器的内容，因此这可能足够了。无论如何，欢迎来到 SO。 - Basic
6
为什么不使用：
br {
content: " "; /* Remove break */
margin-right: 6px; /* Set space between text blocks */
}
- diehk
1
到目前为止，如果您不太关心IE，这是最接近满足要求的答案。 - Mike Garcia
3
如评论中的 boz 所述，这是不可能的。无论
根本问题在于，你使用了错误的工具 - 你想改变 DOM 的结构，这是 JavaScript（至少在客户端）的领域。
另一种不需要 JavaScript 或更改 CMS 的选择是设置一个服务器来代理请求并在文档通过时去除
<br/> 是否可见（如果可见，则为换行符），你都无法通过 CSS 控制它。根本问题在于，你使用了错误的工具 - 你想改变 DOM 的结构，这是 JavaScript（至少在客户端）的领域。
另一种不需要 JavaScript 或更改 CMS 的选择是设置一个服务器来代理请求并在文档通过时去除
<br/> 标签，但这似乎有些过度。- Basic
1
请参见如何使用CSS忽略<br>标签？。 其中一种解决方案是这个（我认为是最好的解决方案）。
br {
content: ' '
}
br:after {
content: ' '
}
- ESP32
1
仍然在2020年有用 - GrafiCode
1
content: " ";
padding-right: 5px; // ok, same as margin-right
- Tomáš Vlček
1
6尽管这段代码片段可能解决了问题，但是包含解释真正有助于提高您的帖子质量。请记住，您正在为将来的读者回答问题，而那些人可能不知道您提出代码建议的原因。同时，也请尝试不要在代码中添加过多解释性注释，这会降低代码和解释的可读性！ - Machavity
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
<br>需要变成空格。如果 HTML 是<p>hello<br/>there</p>，那么br{display:none}将阻止两个单词之间有空格。 - NathanBarleybr{display:inline-block; margin-right:5px;}。 - KBN<br/>设置为display: none来“删除”它。这意味着您无法使用:before/:after伪选择器尝试向HTML中添加内容（例如不间断空格）。http://jsfiddle.net/NrcFL/ - boz