How to remove the text from this html

Question

<div class="breadcrumb">
<h2 class="element-invisible">You are here</h2>
<a href="/cashback/">Home</a> 
admin
</div>

Can any one suggest how to remove the "admin" from the above html by using css? I can't modify the html directly.

the only way to achieve this is to have a css selector that selects only text node, and apply `display:none` to it. Unfortunately, there isn't, so your question is unanswerable using css alone :( http://stackoverflow.com/questions/5688712/is-there-a-css-selector-for-text-nodes-elements — Andreas Wong, May 23 '12 at 07:01
take a look, using javascript http://www.randomsnippets.com/2008/03/07/how-to-find-and-replace-text-dynamically-via-javascript/ — Rafee, May 23 '12 at 07:13
Thank you all:):) I never thought i would such a support from u all. Wesley's solution provided the trick in my case. Once again thanks a lot buddies:):) — Gladiator, May 23 '12 at 09:39

score 3 · Accepted Answer · answered May 23 '12 at 07:11

3

There is a way to do this with just CSS:

.breadcrumb {
    visibility: hidden;
}

.breadcrumb * {
    visibility: visible;
}

answered May 23 '12 at 07:11

Wesley

2,204
15
14

Glad to help you. Don't forget to accept an answer to close the question :) – Wesley May 23 '12 at 09:55

score 1 · Answer 2 · edited May 23 '12 at 12:37

1

you can use str_replace('admin','',$var_name); if you have variable of this html.

edited May 23 '12 at 12:37

Botz3000

39,020
8
103
127

answered May 23 '12 at 07:57

score 0 · Answer 3 · answered May 23 '12 at 07:02

0

You can use:

<span style="display:none;">admin</span>

answered May 23 '12 at 07:02

Kapil Khandelwal

15,958
2
45
52

Thanks for your answer kapil. These codes are from Drupal. I cannot customise them. So is there any other means by which i can hide them? – Gladiator May 23 '12 at 07:06

Ricardo Castañeda · Answer 4 · 2012-05-23T07:53:47.663

Try using position relative with a negative left position, I don't know if you can apply those styles with no problem in your Drupal site, but at least it works in the fiddle.
http://jsfiddle.net/cadence96/M5pfV/1/

First give a relative position to the container moving it away of the view applying a css style of left: -9999px
then select the children elements, give them position relative, and style them with left: 9999px, this way you'll get your necessary elements back in the view.

PD: I tried to use the same process with negative text indent, but I don't know why it didn't work.

score 0 · Answer 5 · edited Nov 15 '12 at 01:01

0

text-indent:-9999px;
position:relative;

for IE7:

text-transform:uppercase;

edited Nov 15 '12 at 01:01

Luca

9,259
5
46
59

answered May 23 '12 at 07:51

S.S.Niranga

364
1
11

How to remove the text from this html

5 Answers5