css - 隐藏元素文本但不隐藏子文本

Question

考虑这个元素层次结构

<div>
    A
    <div>B</div>
</div>

是否可以使用 CSS 隐藏文本 A 而不是 B？布局还应该在 A 所在的位置不留空白。

我尝试过的:

• 将 visibility 设置为 hidden 并在 child 上重置它会留下空白
• 在父级上将font-size设置为0并在子级上重置在 FF 中有效，但在 iOS 上不适用于 WebKit

这是一个JSFiddle对于问题

Answer 1

您可以尝试使用 visibility:collapse:

body > span{
    visibility:collapse;
}
span > span {
    visibility:visible;
}

Fiddle Demo

这也适用于 visibility:hidden;

body > span{
    visibility:hidden;
}
span > span {
    visibility:visible;
}

Fiddle Demo