Hiding text in an element
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.
6 Answers 6
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
hides your element, but preserves the space it would normally take. Whereas this CSS will hide an element as if it never existed:
you can use this code if u need hide text
to hide all direct child’s use
if you need all child’s use last code but change class to
Use css display property. In HTML this would look like
Using javascript: document.getElementById(«view-item-hero-header-score»).style.display=»none»
Using CSS you can set a style:
So to hide all descendants (*) within your element:
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:
Equally instead of the visibility you can use:
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.
Hide text within HTML?
I’ll be completing a website soon for my university (in fact, it’s mostly finished now other than some mild tweaking) and I’d like to add a hidden thank-you to some bloggers who helped, and the stack overflow community which was a huge help. Right now, I’ve got a text section which is hidden this way:
@ZacBrown ah ok. Good. I was helping a guy not so long ago who was studying web design and he told me his tutor told him to us bgcolor ,
@Chris Marquee? Really? I’ve not seen that since my first Angelfire site like. 15 years ago? 😉
9 Answers 9
This will keep its space, but not show anything;
This will hide the object fully, plus its (reserved) space;
you can use css property to hide style=»display:none;»
You said that you can’t use HTML comments because the CMS filters them out. So I assume that you really want to hide this content and you don’t need to display it ever.
In that case, you shouldn’t use CSS (only), as you’d only play on the presentation level, not affecting the content level. Your content should also be hidden for user-agents ignoring the CSS (people using text browsers, feed readers, screen readers; bots; etc.).
In HTML5 there is the global hidden attribute:
When specified on an element, it indicates that the element is not yet, or is no longer, directly relevant to the page’s current state, or that it is being used to declare content to be reused by other parts of the page as opposed to being directly accessed by the user. User agents should not render elements that have the hidden attribute specified.
Example (using the small element here, because it’s an «attribution»):
Thanks to John Doe for this idea. As a fallback (for user-agents that don’t know the hidden attribute), you can specify in your CSS:
An general element for plain text could be the script element used as «data block»:
Alternatively, you could also use data-* attributes on existing elements (resp. on new div elements if you want to group some elements for the attribution):
This is some visible example content …
Hide Text with CSS, Best Practice?
The #web-title would be styled with background:url(http://website.com/logohere.png) , but how to properly hide the text Website Name ? As seen here: Hide text using css or here https://stackoverflow.com/a/2705328 , I’ve seen various methods to hide the text, such as:
I’ve also seen some combine those three methods. But actually which one is the best practice to hide text effectively?
Not constructive: As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or specific expertise, but this question will likely solicit debate, arguments, polling, or extended discussion.
Ain’t no smart ass, but can’t you just put an image tag instead? I’m just a practical person who doesn’t like ugly ad-hoc solutions. maybe I’m wrong
Here’s a list of most image replacement techniques, their pros and cons: css-tricks.com/examples/ImageReplacement
12 Answers 12
Actually, a new technique came out recently. This article will answer your questions: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
It is accessible, an has better performance than -99999px.
Update: As @deathlock mentions in the comment area, the author of the fix above (Scott Kellum), has suggested using a transparent font: http://scottkellum.com/2013/10/25/the-new-kellum-method.html.
@Danger14 Can’t remember, but since it was posted on Zeldman’s site, a bunch of people must have been commenting on it on blogs, and Twitter.
you can simply make it transparent
+1 this works great if you have a link that you need to still be active. I used this to get rid of numbers on an old image slider and the links work fine.
This is the solution that ended up working for my needs. I have a button which has a graphic via the css background-image property and on mobile devices I wanted to collapse the button down and hide the text.
Can’t you use simply display: none; like this
Or how about playing with visibility if you are concerned to reserve the space
Display:none has very bad implications for people using screen readers. It’s a big accessibility no-no.
@Mr.Alien: I believe it’s because screen readers that respect CSS will plain skip over the undisplayed elements. You don’t want this to happen for headings. Basically, you want to hide the text from not-screen-readers only.
but what’s the use of reading a text which actually you want to hide, and if you really want that it should be readed out than why to hide? and where this user has said that he wants a reader compatible solution?
He didn’t say he wants screen readers, but he asked what’s best practice. Providing good accessibility is the proper way of doing things. Imagine he devastating it would be for screen readers if you did this to your logo and menu items.
@Mr.Alien The logo would be replacing the text showing the name of your site. There is a reason that’s usually placed first on a page. Most people want to know in what site they are.
the way most developers will do is:
I used to do it too, until i realized that you are hiding content for devices. aka screen-readers and such.
you ensure that the text still is readable.
That is bloody brilliant. Was stuck on a problem where i wanted to hide some parts of the ajax file uploader, such as the dropzone and some text in StatusContainer. This little hack did the trick.
Add .hide-text class to your span that has the text
or make the text transparent
use according to your use case.
As others have said, display: none has a very bad implication for screen reader. stackoverflow.com/a/12783474/651170
If you’re willing to accomodate this in your markup (as you are in your question with the holding the text), I’d go with whatever jQuery UI went with in their CSS helpers:
The image replacement techniques are good if you absolutely refuse to add extra markup for the text to be hidden in the container for the image.
What Google(search bot) needs is same content should be served to bot as it is served to user. Indenting text away (any text) gets bot to think it is a spam or you are serving different content to user and bot.
The best method is to directly use logo as an image inside your anchor tag. Give an ‘alt’ to your image. This will be perfect for bot to read & also will help in image searching.