Hiding text in an element

Question

Let's say we have:

<div id="view-item-hero-info">
    <h2>{{name}}</h2>
    <h4>{{location}}</h4>
    <h3>
        <span id="view-item-hero-header-score">
            You scored {{userScore}}pts
        </span>
    </h3>
    {{description}}
</div>

Is there a way I can hide the text directly inside #view-item-hero-info? I know I can use text-indent but is there another, nicer, way?

Note: I don't want to hide the element, just everything inside it.

Note 2: Hiding all the elements within #view-item-hero-info is fine, I can use #view-item-hero-info > * { display: none } but then the text directly within #view-item-hero-info is still visible. I need #view-item-hero-info to remain visible so that its background can be seen but the text inside it must be hidden.

So by "another, *nicer*, way", you simply mean "another way"? — BoltClock, Mar 01 '12 at 13:23

score 3 · Answer 1 · answered May 14 '13 at 11:10

3

You can try:

#view-item-hero-info {
    color: transparent;
}

answered May 14 '13 at 11:10

AnnanFay

9,573
15
63
86

1

That's probably as close as it's going to get. – Ahmed Nuaman May 14 '13 at 11:51
color: transparent; does not work in some browsers. Some browsers when encountering color: transparent use color:white instead, especially for links. So I use font-size: 0.1px – Roberto Murphy Jul 22 '16 at 17:00

score 2 · Answer 2 · answered Mar 01 '12 at 13:03

2

Using this CSS:

visibility: hidden;

hides your element, but preserves the space it would normally take. Whereas this CSS will hide an element as if it never existed:

display: none;

answered Mar 01 '12 at 13:03

jgoldberg

455
5
11

Hmm not quite, I still want the element to be visible, just its children to be hidden – Ahmed Nuaman Mar 01 '12 at 13:27

Albaz · Answer 3 · 2017-10-08T11:46:54.537

1

you can use this code if u need hide text

.text-hidden{
   font-size: 0;
   text-indent: -9999px;
}

to hide all direct child's use

.hidden-nested > *{
    visibility: hidden; /*or next line */
    display:none ;
}

if you need all child's use last code but change class to

 .hidden-nested  *

edited Oct 08 '17 at 11:46

answered Oct 08 '17 at 11:39

Albaz

905
12
21

score 0 · Answer 4 · answered Mar 01 '12 at 13:03

0

Use css display property. In HTML this would look like <span style="display: none">

Using javascript: document.getElementById("view-item-hero-header-score").style.display="none"

in css:

#view-item-hero-header-score {
   display: none;
}

answered Mar 01 '12 at 13:03

Matt Fellows

6,512
4
35
57

Hmm not quite, I still want the element to be visible, just its children to be hidden – Ahmed Nuaman Mar 01 '12 at 13:26
So stick the text in another span and hide that using visibility: hidden ? – Matt Fellows Mar 01 '12 at 13:29
I can't control if the text is within an element or not. – Ahmed Nuaman Mar 01 '12 at 13:31

score 0 · Answer 5 · edited May 23 '17 at 10:28

0

Using CSS you can set a style:

visibility:hidden

So to hide all descendants (*) within your element:

#view-item-hero-info * { visibility: hidden }

If instead you only want to hide direct descendants ie children but not grandchildren then you use the direct child selector (>)

Rather than selecting all (*) you can select particular descendants eg divs:

#view-item-hero-info div { visibility: hidden }

Equally instead of the visibility you can use:

display:none

The display option doesn't take up space whereas if you want to reserve the space for when the element will be shown you use the visibility option

EDIT: There isn't a selector just for a text node (ie the text without the element). See Is there a CSS selector for text nodes?. So all children of your span need to be in an element in order to have style applied.

As a hack you could just put another span directly in your main one and all content (including the standalone text) within that. Then the hiding will work.

edited May 23 '17 at 10:28

Community

1
1

answered Mar 01 '12 at 13:06

kaj

5,133
2
21
18

Hmm not quite, I still want the element to be visible, just its children to be hidden – Ahmed Nuaman Mar 01 '12 at 13:28
My original answer solved your original question (hiding the span). I've updated it now that you want to hide the children/descendants – kaj Mar 01 '12 at 13:48
Again, I think I haven't explained this correctly, please see the edit. – Ahmed Nuaman Mar 01 '12 at 14:15
I'm not able to add or remove elements, I can only work with that HTML. Oh well, it seems `text-indent` is the only answer. – Ahmed Nuaman Mar 01 '12 at 15:18

score 0 · Answer 6 · edited Mar 01 '12 at 18:55

0

Could you use JS to iterate though all child items in the elements DOM and then use JS to overwrite the CSS? Something like:

var items_i_want = document.getElementById("view-item-hero-header-score").elements

for(var i = 0; i < items_i_want .length; i++)
{
    items_i_want [i].style.display="none"
}

edited Mar 01 '12 at 18:55

Mark Ursino

31,209
11
51
83

answered Mar 01 '12 at 14:25

Pete Hotchkiss

1

Hiding text in an element

6 Answers6