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>

编辑：很难用 span 包装它，因为它们是由框架生成的。

4

2 回答 2

3

只使用 CSS，不使用 JavaScript，不更改 HTML，如果没有像这样的丑陋黑客，很难做到这一点：

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

示范

我建议通过添加一些跨度或使用 JavaScript 来更改您的 HTML。这是 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 文本缩进草案，您将能够做到

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

http://dev.w3.org/csswg/css-text/#text-indent上的文档

于 2013-11-07T11:38:50.603 回答