1

次のコードがある場合、css を使用して 5000 と 5001 のテキストを非表示にするにはどうすればよいですか?

<div id="field-dishe" class="readonly_label">
5000&nbsp;&nbsp;&nbsp;家乡猪脚醋  或  秘制黄酒鸡 Pork Trotters in Sweetened Vinegar Or Chicken Stewed in Rice Wine<br> 
5001&nbsp;&nbsp;&nbsp;椰香冷当雞 Rendang Chicken<br>
</div>

編集:フレームワークによって生成されるため、スパンでラップすることは困難です。

4

2 に答える 2

3

JavaScript を使用せず、HTML を変更せずに CSS だけを使用すると、次のような醜いハックなしでそれを行うのは困難です。

#field-dishe{
  position: relative;
}
#field-dishe:before {
    position: absolute;
    width: 35px;
    top:0;
    bottom:0;
    z-index:2;
    background: white;
    content:" "
}

デモンストレーション

スパンを追加して HTML を変更するか、JavaScript を使用することをお勧めします。jQuery を使用した例を次に示します。

$('#field-dishe').html(function(_,h){
  return h.replace(/\d+/g,'');
});

デモンストレーション

于 2013-11-07T11:34:06.387 に答える
0

cssだけでは本当に無理

HTMLを少し変更してみませんか（これらの部分をspan要素でラップすることにより）

<div id="field-dishe" class="readonly_label">
<span>5000</span>&nbsp;&nbsp;&nbsp;家乡猪脚醋  或  秘制黄酒鸡 Pork Trotters in Sweetened Vinegar Or Chicken Stewed in Rice Wine<br> 
<span>5001</span>&nbsp;&nbsp;&nbsp;椰香冷当雞 Rendang Chicken<br>
</div>

と使用#field-dishe span{display:none}

将来、CSS3 text-indent ドラフトが実装されれば、できるようになります

#field-dishe{
  text-indent:-42px each-line;
}

http://dev.w3.org/csswg/css-text/#text-indentのドキュメント

于 2013-11-07T11:38:50.603 に答える