隱藏元素的文本，但不子文本

Question

考慮這個元素層次

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

是否有可能隱藏文本A但不B與CSS？佈局應該也不會留下任何空的空間，其中A會是。

我的嘗試：

• 設置visibility到hidden和重置它的孩子離開空白
• 設置font-size到0對父母和復位兒童在iOS

在FF但不是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

是的，我認爲你是在正確的軌道與知名度上stuff：這是唯一一個顯示不覆蓋子元素可見性的屬性（display: none不能在子元素上重寫）。

請注意visibility: collapse只適用於表格單元格（即使在那裏效果很差）：visibility: hidden就是您所追求的。

爲了對抗可見性切換的非摺疊性，您可以試着擺弄絕對位置。

退房這個演示的基本思想：http://jsbin.com/hetis/2/edit

Answer 3

試試這個：

用你的同一個概念像這樣

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