[Solved] How to hide text that doesn't have its own tag

[Russell]

Howdy:

I’m trying to hide some text which appears inside an <aside> element, as well as many other items I don’t want to hide. The text doesn’t have its own tag so it’s hard to target in the CSS.

The site is here: http://gestaltcentre.co.uk/

Here’s the text I want to hide:
https://www.evernote.com/shard/s4/sh/a728b9a1-9407-407e-97c3-9cc26766c583/85df2314593b58ce1a9e5acee951d105

The HTML for this area looks like this:
<aside id="slideshow-4" class="widget widget_slideshow">Around the Gestalt Centre<div class="ngg_slideshow widget">...

… and then it continues to contain all the image code before the </aside> tag closes up again.

If I try a text-indent:-5000px; rule, it hides everything.

Any ideas? I hope that’s clear enough; if not, I can provide more info.

Thanks in advance.

Kind regards, Russell

[Paulie_D]

…and this is why all text should be in tags. I can’t count the number of times that I’ve seen code with pure text nodes…don’t they teach people anything?

Sorry – Rant Over

I’ll have a poke around the darkest corners of the interwebz and report back.

[Paulie_D]

Ok…this might be extreme depending on how your <aside> is set up, butvisibilitycan be overriden for children of a parent withvisibility:hidden.

So…add visibility:hidden to your <aside> and reset it for all the child elements.

Like so

http://codepen.io/Paulie-D/pen/ltsgv

[MDMueller]

Obviously it should have an own tag, but in case that absolutely isn’t possible you could use workarounds like setting the font-color to transparent and resizing the element or setting the font-size to zero:

color: transparent;

font-size: 0;
-webkit-text-size-adjust: none;

The latter is needed to avoid text-size-resizing on smartphones. As these values are inherited, you shouldn’t forget to “reset” them in child-elements.

[paulob]

Or you could try:

#slideshow-4{text-indent:-999em}
#slideshow-4 div{text-indent:0}

Assuming no other elements are in that section.

[Paulie_D]

It should be remembered that some of these solutions will only hide the text. They will still leave a space for it on the screen.

visibility:hidden, color:transparent and text-indent will do this.

the font-size:0 option will work better I think.

[paulob]

It should be remembered that some of these solutions will only hide the text. They will still leave a space for it on the screen.

That won’t be an issue with my method in this case and the space will be collapsed because the following div is floated and therefore the inline text will wrap the float and no extra space will appear above the image. It will be as if the text did not exist.

[Paulie_D]

That won’t be an issue with my method in this case

Of course.

I was generalising…..

[Author]

Posts