Question

当我有以下代码时，如何使用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包装它，因为它们是由框架生成的。

Answer 1

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

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

Demonstration

我建议您通过添加一些范围来更改HTML或使用JavaScript。这是jQuery的一个例子：

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

Demonstration

Answer 2

仅用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

上的文档

使用css隐藏html中的部分文本

2 个答案: