用CSS阻止BR标签打破

Question

有没有办法 只使用CSS 来阻止标记？

我试过br{display:none}whick的作品,但它也摆脱了我需要保留的两个单词之间的空间.

这仅适用于webkit(iPhone),所以任何CSS3的盛会都很好.

我无法编辑CMS中的内容,因此简单地删除标记对我来说不是一个选项.

谢谢!

Answer 1

按照这里的答案,这可以防止 Chrome和IE中的标记中断:

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

你只需在 标签之前或之后在HTML中添加一个空格,对吗？所以`Foo bar`看起来像`Foobar`但是`Foo bar`看起来像`Foo bar`.奇怪的是,`Foo bar`并没有保留IE中的空间...... (3认同)
但它不会插入任何空格. (2认同)

Answer 2

这对我有用:

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

Answer 3

好吧,经过一些游戏,我找到了一个我将与你分享的解决方案.看起来可以 用CSS完全控制标签

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

button br:after{content:" ";}

Html -

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

不确定这是如何跨浏览器,但它在Webkit和iPhone中工作,现在我只需要它.

Answer 4

为什么不使用：

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

Answer 5

正如 boz 在 OP 的评论中提到的，这是不可能的。要么 是可见的（在这种情况下，它是一个回车符），要么是不可见的，在这种情况下您无法通过 CSS 控制它。

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

另一种不需要 Javascript 或对 CMS 进行更改的替代方案是设置一个服务器来代理请求并在 请求通过文档时剥离标签，但这似乎有点矫枉过正