Hide text using CSS to not take page space
Currently I am having an issue when dealing with CSS and using Hover over a logo. I have this logo that when hovered on, a body of text will appear underneath, then of course when moved away, this text disappears and the logo returns to normal. The issue is that when this text is hidden, it is still taking up page space, so for instance when viewed on a mobile device, there is large blank spots where the text would appear when hovered on. Is there anyway to say move this text to another point of the screen, or change the wrapping, so that it does not take this space. It is glaringly obvious these blank spots when scrolling on a mobile phone. I have attached an example and changed the image and words to Fried Chicken, because who doesn’t enjoy some finger licking good stuff.
.logo2 < width:100%; height:auto; >.logo2 < padding: 0px; margin: 0 auto; position: inline; display: block; >.logo__image2 < width: 100%; transition: transform .5s; height: auto; >.logo__text2 < color: #636059; font-size: 16px; font-weight: normal; font-family: Arial; text-align: justify; text-transform: normal; opacity: 0; transition: opacity .5s; position: inline; position: translateY(70px); bottom: 0; left: 0; right: 0; >.logo2 .img-responsive < margin: 0 auto; >.logo2:hover .logo__image2 < transform: translateY(-25px); >.logo2:hover .logo__text2
In a large resealable plastic bag, combine 2-2/3 cups flour, garlic salt, paprika, 2-1/2 teaspoons pepper and poultry seasoning. In a shallow bowl, beat eggs and water; add salt and the remaining flour and pepper. Dip chicken in egg mixture, then place in the bag, a few pieces at a time. Seal bag and shake to coat.
In a deep-fat fryer, heat oil to 375°. Fry chicken, several pieces at a time, for 5-6 minutes on each side or until golden brown and juices run clear. Drain on paper towels. Yield: 8 servings.
Hide text using css
Using css I want to replace the text with my actual logo. I’ve got the logo there no problem via resizing the tag and putting a background image in via css. However, I can’t figure out how to get rid of the text. I’ve seen it done before basically by pushing the text off the screen. The problem is I can’t remember where I saw it.
there are lots of outdated answers here: consider upvoting the more recent answer stackoverflow.com/a/27769435/2586761 to expose it
31 Answers 31
Here is another way to hide the text while avoiding the huge 9999 pixel box that the browser will create:
long titles will have an issue with this method since only the text before word-wrap is indented, and the W3C spec doesn’t specify a situation for negative indent so this could have unpredictable results
If you use this method, you should add «overflow: hidden» to prevent seird selection box shooting off to the left (especially with links)
If you have any links in elements with the negative text-indent, make sure you also specify «outline: none» otherwise you get a dotted border going off the left of screen.
I prefer to use ‘text-indent: -9999px;’ just to make sure the text goes really far off the screen. A bit of defensive paranoia.
Also add ‘white-space: nowrap’ just to be on the safe side if your text is long as only the first line is indented.
The text will become visible if the user selects it ( STRG+A etc. ) — This looks very unprofessional! Greetings Christopher
@HasanGürsoy and future googlers- «CSS3 extends the color value to include the ‘transparent’ keyword. «
Just add font-size: 0; to your element that contains text.
font-size: 0; hides text. You can't see me :) This is exactly what I needed. I wanted to hide what was in a div, but show what was in the child spans (to hide the punctuation between them).
This seems like the most logical (read: Least Bizarre) method — however, I wonder how well it’s supported in various browsers? (I can confirm it works in Firefox.)
It still shows the text very small in a more browsers than just IE7, this is not a complete cross browser solution.
I have tested
The most cross-browser friendly way is to write the HTML as
then use CSS to hide the span and replace the image
If you can use CSS2, then there are some better ways using the content property, but unfortunately the web isn’t 100% there yet.
But be sure to also set the width and height attribute to that of the image — and make sure «padding» and «margin» are set because browsers have different ideas as to how much padding/margin a H1 tag needs to have.
The drawback here is if images are turned off, or if a css-aware bot shows up, the title won’t be visible.
The important text within display none will probably be missed by search engine bots and screen readers. Use text-indent instead.
This wont do a thing, OP might as well remove the text in the title. Screen readers don’t do anything with display none..
Hiding text with accessibility in mind:
In addition to the other answers, here is another useful approach for hiding text.
This method effectively hides the text, yet allows it to remain visible for screen readers. This is an option to consider if accessibility is a concern.
It’s worth pointing out that this class is currently used in Bootstrap 3.
If you’re interested in reading about accessibility:
This works well for adding an element is screen-reader only; however, it does not work with the original question where an image is to be displayed by a background image specified in css.
@vossad01 — If you can’t add another element, and you are stuck with a single element (like in the case that you mentioned), then one good workaround would be to utilize a pseudo-element. also, I posted this answer 6 years after the initial question was asked, and my answer was intended to target a broader audience since this question appears to be popular.
you can simply hide your text by add this attribute:
It is also worth checking whether the !important clause is actually needed in your case. In my case it worked fine without it as well.
Jeffrey Zeldman suggests the following solution:
It should be less resource intensive than -9999px;
Please read all about it here:
So many complicated solutions.
The easiest one is simply to use:
See mezzoblue for a nice summary of each technique, with strengths and weaknesses, plus example html and css.
The above works well in latest Thunderbird also.
Note that using this method makes the text un-readable to most screen readers — see stackoverflow.com/questions/1755656/…
Do not use < display:none; >It makes the content inaccessible. You want screen-readers to see your content, and visually style it by replacing the text with an image (like a logo). By using text-indent: -999px; or a similar method, the text is still there — just not visually there. Use display:none , and the text is gone.
The answer is to create a span with the property
You can find an example at this site
Some of the downvotes probably have to do with accessibility concerns — a valid point. But in my case, I’m pulling a menu from a restaurant menu service into a website via their web service. The restaurant owner doesn’t want the prices displayed (but the same service is used to print the actual menus.) That’s a situation where one doesn’t want the prices on the site at all. It’s good to know all the possible approaches.
Downvotes have to do with this missing the question altogether. This completely hides the element, it does not however hide only the text of the element.
you can use the css background-image property and z-index to ensure the image stays in front of the text.
If you haven’t any span or div element, it works perfectly for links.
I don’t recall where I picked this up, but have been using it successfully for ages.
=hide-text() font: 0/0 a text-shadow: none color: transparent My mixin is in sass however you can use it any way you see fit. For good measure I generally keep a .hidden class somewhere in my project to attach to elements to avoid duplication.
I think I’ve read somewhere that this version is prefered because a negative text-indent will cause the browser to render a 10000px (or whatever example you use) long box. Changing the font as in this example won’t cause the browser to create a large box that it tries to render.
repalce content with the CSS
This is actually an area ripe for discussion, with many subtle techniques available. It is important that you select/develop a technique that meets your needs including: screen readers, images/css/scripting on/off combinations, seo, etc.
Here are some good resources to get started down the road of standardista image replacement techniques:
Content replacement is directly available in CSS by using the content property.
This seems to be most commonly used to generate ::before and ::after pseudo-elements, but can also be used to replace the content of existing HTML elements.
this is the CSS that will replace the text with the logo:
While in pseudo-elements, any image content cannot be resized (except by using it as a background image), this is not the case for replaced content.
By default, the image will appear at its actual size, expanding the container if necessary, exactly as if it contained an actual element.
In this example, width: 100% is used to fit the logo image to the full width. If the image should be shrink to fit, if needed, but never expanded if the container is larger than the image, then max-width: 100% can be used instead.
According to MDN, the only regular browser which does not support CSS content replacement is Internet Explorer.
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.