Question

使用CSS隐藏<br />标记是一种明确定义的方式，以标记的CSS样式的定义为基础进行换行？它可以跨浏览器移植吗？当我想要它显示时，“内联”是最好的显示类型吗？

鉴于以下CSS和HTML，

<style type="text/css">
  .maybe-hidden {display:inline}
</style>

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

我希望看到：

abra
ca
dabra

将Maybe-hidden更改为maybe-hidden {display:hidden}，我希望看到

abracadabra

编辑：

我很欣赏有关如何更好地做到这一点的答案。我可能没有说的是，这将是生成的HTML，并且正如某些人所建议的那样，改变实际元素的CSS类是不可行的。

但改变样式的定义是可行的，就像改变父/封闭/包含 HTML元素的类一样。

这就是为什么我需要知道这是否定义明确。虽然我会接受一个回答这个问题的答案，但这绝不意味着我认为改变课程的答案是“错误的”;在我的情况下，它们是不可行的。

Answer 1

就个人而言，我认为最好创建两个CSS类（例如，“hidden”和“shown”），然后动态更改DOM元素的类。

如果您担心更改所有＆lt; br＆gt;标签一次，您可以使用基于其容器的选择器：

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。

的类

Answer 2

我不会使用这种有条件地插入换行符的方法。如果某些内容可能是单行或多行，请不要使用用于换行符的HTML元素并阻止它，但要使用预期的CSS。这可能是：

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

并将其设为display:inline;或display:block;。

您也可以使用浮点数，但这会导致副作用，如浮动清除，不会对您的特定情况添加任何内容。最好使用正确的（语义）HTML标记，以及正确的类名和CSS来获取所需的标记。

另请参阅：http://tantek.com/log/2002/12.html了解有关此主题的一些想法。

Answer 3

您可以完全删除“display：inline”。括号之间没有任何内容将使您的类“未定义”并给出＆lt; br＆gt;标记其通常的含义。

Answer 4

它应该适用于各种浏览器。我根本不会为该类设置任何默认显示：

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

我在display:default类的注释中包含明显无效的-show来表达类的意图（使用元素的默认display）。

然后你可以使用jQuery或纯JavaScript交换元素上的类。

这个CSS是否被接受并且定义明确，或者是一个容易出错的黑客？

4 个答案: