这个CSS被接受并定义得很好,还是一个容易失败的黑客?

我个人认为最好创建两个CSS类(例如“hidden”和“shown”),然后动态地更改dom元素的类。

如果您想一次更改所有标记,可以使用基于其容器的选择器:

CSS:

.hidden maybe-hidden
{
    display: none;
}

.shown maybe-hidden
{
    display: inline;
}

HTML:

<div class="shown">
    abra<br class='maybe-hidden' />
    ca<br class='maybe-hidden' />
    dabra<br class='maybe-hidden' />
</div>

然后使用JS更改 div .

我不会使用这种有条件地插入换行符的方法。如果有可能是单行或多行,不要使用用于换行和防止换行的HTML元素,而是使用预期的CSS。这可能是:

<span class="first">abra</span>
<span class="second">ca</span>
<span class="third">dabra</span>

也让他们 display:inline; 或 display:block; .

您也可以使用float,但这会导致诸如float clearing之类的副作用,这对您的特定情况没有任何影响。最好使用正确的(语义)HTML标记、正确的类名和CSS来获得所需的标记。

还可以看到: http://tantek.com/log/2002/12.html 关于这个问题的一些想法。

它应该可以跨浏览器正常工作。不过,我不会为该类设置任何默认显示:

.maybe-hidden-show { /* display:default; */ }
.maybe-hidden-hide { display: none; }

我包括明显无效的 display:default 在评论中 -show 类来表示类的意图(使用元素的默认值 display )

然后您可以使用jquery或纯javascript交换元素上的类。

您可以简单地完全删除“display:inline”。括号之间没有任何内容将使类“未定义”,并赋予<br>标记通常的含义。