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

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

我建议通过添加一些跨度或使用 JavaScript 来更改您的 HTML。这是一个 jQuery 示例:

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

Demonstration