hide part of text in html using css

Question

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.

wrap 5000 and 5001 in a span and add display none to that span. .readonly_label span { display:none; } — Surjith S M
– Surjith S M, Commented Nov 7, 2013 at 11:38

Denys Séguret · Accepted Answer · 2013-11-07 12:00:39Z

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

edited Nov 7, 2013 at 12:00

answered Nov 7, 2013 at 11:34

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

redcoder Over a year ago

hi dystroy, i cannot have the height fixed as the list will be different each time.

Denys Séguret Over a year ago

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

Gabriele Petrioli · Accepted Answer · 2013-11-07 12:45:44Z

-1

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

edited Nov 7, 2013 at 12:45

answered Nov 7, 2013 at 11:38

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

2 Comments

John Over a year ago

can't you use display:none to hide the entire div?

Gabriele Petrioli Over a year ago

@john, the OP specifically asks how to hide the 5000 and 5001 text inside the element.. not the whole element..

Collectives™ on Stack Overflow

hide part of text in html using css

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related