Hide text using css
CssCss Problem Overview
I have a tag in my html like this:
<h1>My Website Title Here</h1>
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.
Css Solutions
Solution 1 - Css
This is one way:
h1 {
text-indent: -9999px; /* sends the text off-screen */
background-image: url(/the_img.png); /* shows image */
height: 100px; /* be sure to set height & width */
width: 600px;
white-space: nowrap; /* because only the first line is indented */
}
h1 a {
outline: none; /* prevents dotted line when link is active */
}
Here is another way to hide the text while avoiding the huge 9999 pixel box that the browser will create:
h1 {
background-image: url(/the_img.png); /* shows image */
height: 100px; /* be sure to set height & width */
width: 600px;
/* Hide the text. */
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Solution 2 - Css
Why not simply use:
h1 { color: transparent; }
Solution 3 - Css
Just add font-size: 0; to your element that contains text.
.hidden { font-size: 0; }
font-size: 0; hides text. You can't see me :)
Solution 4 - Css
The most cross-browser friendly way is to write the HTML as
<h1><span>Website Title</span></h1>
then use CSS to hide the span and replace the image
h1 {background:url(/nicetitle.png);}
h1 span {display:none;}
If you can use CSS2, then there are some better ways using the content property, but unfortunately the web isn't 100% there yet.
Solution 5 - Css
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.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
It's worth pointing out that this class is currently used in Bootstrap 3.
If you're interested in reading about accessibility:
Solution 6 - Css
Jeffrey Zeldman suggests the following solution:
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
It should be less resource intensive than -9999px;
Please read all about it here:
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
Solution 7 - Css
you can simply hide your text by add this attribute:
font-size: 0 !important;
Solution 8 - Css
So many complicated solutions.
The easiest one is simply to use:
color:rgba(0,0,0,0)
Solution 9 - Css
See mezzoblue for a nice summary of each technique, with strengths and weaknesses, plus example html and css.
Solution 10 - Css
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.
Solution 11 - Css
<style>
body {
visibility:hidden
}
body .moz-signature p{
visibility:visible
}
</style>
The above works well in latest Thunderbird also.
Solution 12 - Css
you can use the css background-image property and z-index to ensure the image stays in front of the text.
Solution 13 - Css
Why don't you use:
<li><a href="#">bla</a></li>
a {
opacity: 0.0;
font-size: 1px;
}
li {
background-image: url('test.jpg');
}
If you haven't any span or div element, it works perfectly for links.
Solution 14 - Css
repalce content with the CSS
h1{ font-size: 0px;}
h1:after {
content: "new content";
font-size: 15px;
}
Solution 15 - Css
The answer is to create a span with the property
{display:none;}
You can find an example at this site
Solution 16 - 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:
http://faq.css-standards.org/Image_Replacement
Solution 17 - Css
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.
Solution 18 - Css
Use Condition tag for different browser and using css you have to place
height:0px and width:0px also you have to place font-size:0px.
Solution 19 - Css
If the point is simply to make the text inside the element invisible, set the color attribute to have 0 opacity using a rgba value such as color:rgba(0,0,0,0); clean and simple.
Solution 20 - Css
h1 {
text-indent: -3000px;
line-height: 3000px;
background-image: url(/LOGO.png);
height: 100px; width: 600px; /* height and width are a must */
}
Solution 21 - Css
Try this code to shorten and hide text
.hidetxt{
width: 346px;
display: table-caption;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: no-drop;
}
.hidetxt:hover {
visibility: hidden;
}
<div class="hidetxt">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when</p>
</div>
or to hide use in your css class .hidetxt { visibility: hidden; }
Solution 22 - Css
If we can edit the markup, life can be easier, just remove text and be happy. But sometimes the markup was placed by JS code or we just aren't allowed to edit it at all, too bad css turned to be the only weapon placed at our disposal.
We cannot place a <span> wrapping the text and hide the whole tag. By the way, some browsers do not only hides elements with display:none but also disables the components inside.
Both font-size:0px and color:transparent may be good solutions, but some browsers don't understand them. We can't rely on them.
I suggest:
h1 {
background-image: url(/LOGO.png); /* Our image */
text-indent: -3000px; /* Send text out of viewable area */
height: 100px; width: 600px; /* height and width are a must, agree */
overflow:hidden; /* make sure our size is respected */
}
Using overflow:hidden enforces our width & height. Some browsers (will not name them... IE) may read width and height as min-width and min-height. I want to prevent box to be enlarged.
Solution 23 - Css
I usually use:
span.hide
{
position:fixed;
right:-5000px;
}
Solution 24 - Css
Using zero value for font-size and line-height in the element does the trick for me:
<style>
.text {
display: block;
width: 200px;
height: 200px;
font-size: 0;
line-height: 0;
}
</style>
<span class="text">
Invisible Text
</span>
Solution 25 - Css
To hide text from html use text-indent property in css
.classname {
text-indent: -9999px;
white-space: nowrap;
}
/* for dynamic text you need to add white-space, so your applied css will not disturb. nowrap means text will never wrap to the next line, the text continues on the same line until a <br> tag is encountered
Solution 26 - Css
One of the ways I achieve this is to use :before or :after. I've used this approach for several years, and particularly works great with glyph vector icons.
h1 {
position: relative;
text-indent: -9999px; /* sends the text off-screen */
}
h1:before {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: block;
width: 600px;
height: 100px;
content: ' ';
background: transparent url(/the_img.png) 0 0 no-repeat;
}
Solution 27 - Css
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.
For the original example
<h1>My Website Title Here</h1>
this is the CSS that will replace the text with the logo:
h1 {
content: url(mywebsitelogo.png);
width: 100%;
}
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 <img> 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.
Solution 28 - Css
This worked for me with span (knockout validation).
<span class="validationMessage">This field is required.</span>
.validationMessage {
background-image: url('images/exclamation.png');
background-repeat: no-repeat;
margin-left: 5px;
width: 16px;
height: 16px;
vertical-align: top;
/* Hide the text. */
display: inline-block;
overflow: hidden;
font-size: 0px;
}
Solution 29 - Css
A solution that works for me :
HTML
<div class="website_title"><span>My Website Title Here</span></div>
CSS
.website_title {
background-image: url('../images/home.png');
background-repeat: no-repeat;
height: 18px;
width: 16px;
}
.website_title span {
visibility: hidden;
}
Solution 30 - Css
The best answer works for short text, but if the text wraps it just shows up in the image.
One way to do it is catch errors with a jquery handler. Try to load an image, if it fails it throws an error.
$('#logo img').error(function(){
$('#logo').html('<h1>My Website Title Here</h1>');
});
See SAMPLE CODE
Solution 31 - Css
h1{
background:url("../images/logo.png") no-repeat;
height:180px;
width:200px;
display:inline-block;
font-size:0px !important;
text-intent:-9999999px !important;
color:transparent !important;
}