1

When I have the following code, how do I hide the 5000 and 5001 text using css?

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

Edit: It is difficult to wrap it with span because they are generated by a framework.

redcoder
  • 2,233
  • 4
  • 22
  • 24

2 Answers2

3

Using just CSS, without JavaScript and without changing the HTML, it's hard to do it without ugly hacks like this one : 

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

Demonstration

I'd recommend to change your HTML by adding some span or to use JavaScript. Here's an example with jQuery :

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

Demonstration

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • hi dystroy, i cannot have the height fixed as the list will be different each time. – redcoder Nov 07 '13 at 11:58
  • @redcoder I edited with a not fixed height. But really, I'm not sure changing the HTML or adding some JS wouldn't be cleaner. Having a fixed width would be painful when you change your font size or numbers. – Denys Séguret Nov 07 '13 at 12:01
0

not really possible with just css

Why not alter the html a bit (by wrapping those parts in span elements)

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

and use #field-dishe span{display:none}

In the future if the CSS3 text-indent draft is implemented you will be able to do 

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

Documentation at http://dev.w3.org/csswg/css-text/#text-indent

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317