html - 停止使用 CSS 破坏 BR 标签

Question

有没有办法<br>只使用 CSS 来阻止标签破坏？

我尝试br{display:none}了 whick 作品，但它也摆脱了两个词之间的空格，我需要保留。

这仅适用于 webkit (iPhone)，因此任何 CSS3 盛会都可以。

我无法编辑 CMS 中的内容，因此很遗憾，简单地删除标签对我来说不是一个选择。

谢谢！

score 23 · Accepted Answer

按照此处的答案，这可以防止<br>标签在 Chrome 和 IE 中中断：

br {
    content: " ";
    display: none;
}

score 11 · Accepted Answer

11

这对我有用：

br {content: ""}
br:after {content: "\00a0"}

于 2014-11-06T16:32:34.500 回答

score 8 · Accepted Answer

好的，经过一番玩耍后，我找到了一个解决方案，我将与您分享。似乎可以<br>使用 CSS 完全控制标签

button br{content:" ";border:1px solid #fff;background:red;padding:50px;}/* whatever you like */

button br:after{content:" ";}

Html -

<button>the annoying<br/>tag is gone leaving a controlable space</button>

不知道这是如何跨浏览器，但它在 Webkit 和 iPhone 中工作，这就是我现在所需要的。

score 6 · Accepted Answer

为什么不使用：

br {
    content: " "; /* Remove break */
    margin-right: 6px; /* Set space between text blocks */
}

score 3 · Accepted Answer

正如boz在对OP的评论中提到的那样，这是不可能的。要么<br/>是可见的（在这种情况下，它是一个回车），要么在这种情况下你无法通过 CSS 控制它。

这里的根本问题是你使用了错误的工具来完成这项工作——你想改变 DOM 的结构，它是 Javascript 的域（至少在客户端中）。

不需要 Javascript 或更改 CMS 的替代方法是设置服务器来代理请求并在<br/>标签通过文档时剥离标签，但这似乎有点矫枉过正

score 1 · Accepted Answer

1

content: " ";
padding-right: 5px; // ok, same as margin-right

于 2017-11-14T14:08:50.093 回答

score 1 · Accepted Answer

请参阅使用 CSS 忽略 <br>？. 解决方案之一是这个（这是我认为最好的一个）

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

7 回答 7