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.
This question is related to
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;
}
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.
The answer is to create a span with the property
{display:none;}
You can find an example at this site
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.
you can use the css background-image property and z-index to ensure the image stays in front of the text.
Try this code to shorten and hide text
.hidetxt{_x000D_
_x000D_
width: 346px;_x000D_
display: table-caption;_x000D_
white-space: nowrap;_x000D_
overflow: hidden;_x000D_
text-overflow: ellipsis;_x000D_
cursor: no-drop;_x000D_
_x000D_
}_x000D_
_x000D_
.hidetxt:hover { _x000D_
_x000D_
visibility: hidden;_x000D_
_x000D_
}<div class="hidetxt">_x000D_
<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>_x000D_
</div>or to hide use in your css class .hidetxt { visibility: hidden; }
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:
h1 {
text-indent: -3000px;
line-height: 3000px;
background-image: url(/LOGO.png);
height: 100px; width: 600px; /* height and width are a must */
}
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
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.
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
<style>
body {
visibility:hidden
}
body .moz-signature p{
visibility:visible
}
</style>
The above works well in latest Thunderbird also.
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:
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;
}
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/
you can use the css background-image property and z-index to ensure the image stays in front of the text.
repalce content with the CSS
h1{ font-size: 0px;}
h1:after {
content: "new content";
font-size: 15px;
}
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
h1 {
text-indent: -3000px;
line-height: 3000px;
background-image: url(/LOGO.png);
height: 100px; width: 600px; /* height and width are a must */
}
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.
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.
Just add font-size: 0; to your element that contains text.
.hidden { font-size: 0; } font-size: 0; hides text. <span class="hidden"> You can't see me :) </span>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
Why not simply use:
h1 { color: transparent; }
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;
}
you can simply hide your text by add this attribute:
font-size: 0 !important;
The answer is to create a span with the property
{display:none;}
You can find an example at this site
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.
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>
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.
The answer is to create a span with the property
{display:none;}
You can find an example at this site
you can simply hide your text by add this attribute:
font-size: 0 !important;
I usually use:
span.hide
{
position:fixed;
right:-5000px;
}
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.
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
See mezzoblue for a nice summary of each technique, with strengths and weaknesses, plus example html and 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;
}
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.
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;
}
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.
So many complicated solutions.
The easiest one is simply to use:
color:rgba(0,0,0,0)
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.
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
<style>
body {
visibility:hidden
}
body .moz-signature p{
visibility:visible
}
</style>
The above works well in latest Thunderbird also.
So many complicated solutions.
The easiest one is simply to use:
color:rgba(0,0,0,0)
See mezzoblue for a nice summary of each technique, with strengths and weaknesses, plus example html and css.
you can use the css background-image property and z-index to ensure the image stays in front of the text.
repalce content with the CSS
h1{ font-size: 0px;}
h1:after {
content: "new content";
font-size: 15px;
}
Try this code to shorten and hide text
.hidetxt{_x000D_
_x000D_
width: 346px;_x000D_
display: table-caption;_x000D_
white-space: nowrap;_x000D_
overflow: hidden;_x000D_
text-overflow: ellipsis;_x000D_
cursor: no-drop;_x000D_
_x000D_
}_x000D_
_x000D_
.hidetxt:hover { _x000D_
_x000D_
visibility: hidden;_x000D_
_x000D_
}<div class="hidetxt">_x000D_
<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>_x000D_
</div>or to hide use in your css class .hidetxt { visibility: hidden; }
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/
The answer is to create a span with the property
{display:none;}
You can find an example at this site
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
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.
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;
}
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;
}
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 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.
I usually use:
span.hide
{
position:fixed;
right:-5000px;
}
Just add font-size: 0; to your element that contains text.
.hidden { font-size: 0; } font-size: 0; hides text. <span class="hidden"> You can't see me :) </span>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;
}
you can use the css background-image property and z-index to ensure the image stays in front of the text.
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.
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>
Why not simply use:
h1 { color: transparent; }
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.
Source: Stackoverflow.com