DEMO1

Question

考虑这个元素层次结构

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

是否可以使用CSS隐藏文字A而不隐藏B？布局也应该没有A所在的空白区域。

我尝试了什么：

将visibility设置为hidden并将其重置为子项空白
在父级上将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

Answer 2

试试这个：

使用与此相同的概念

CSS：

     #a {
           visibility:hidden;
           font-size:0px
        }
        #b {
            visibility:visible;
            font-size:10px
        }

HTML：

 <span id="a">A
    <span id="b">B</span>
        </span>

DEMO1

DEMO2

对于此HTML：

 <div id="a">A
    <div id="b">B</div>
        </div>

DEMO UPDATED

Answer 3

是的，我认为你在可见性方面走在正确的轨道上：它是显示器不会覆盖子元素可见性的唯一属性（display: none无法在子元素上覆盖）

请注意，visibility: collapse仅适用于表格单元格（即使在那里效果也很差）：visibility: hidden就是您所追求的目标。

为了对抗可见性切换的非崩溃性质，你可以尝试摆弄绝对定位。

查看此演示的基本概念：http://jsbin.com/hetis/2/edit

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

3 个答案:

DEMO1

DEMO2

DEMO UPDATED