'Hide text using css

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

Solution 1:^[1]

Why not simply use:

h1 { color: transparent; }

Solution 2:^[2]

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>

Solution 3:^[3]

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 4:^[4]

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 5:^[5]

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 6:^[6]

you can simply hide your text by add this attribute:

font-size: 0 !important;

Solution 7:^[7]

So many complicated solutions.

The easiest one is simply to use:

color:rgba(0,0,0,0)

Solution 8:^[8]

See mezzoblue for a nice summary of each technique, with strengths and weaknesses, plus example html and css.

Solution 9:^[9]

<style>
body {
     visibility:hidden
}
body .moz-signature p{
    visibility:visible
}
</style>

The above works well in latest Thunderbird also.

Solution 10:^[10]

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:^[11]

you can use the css background-image property and z-index to ensure the image stays in front of the text.

Solution 12:^[12]

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 13:^[13]

repalce content with the CSS

 h1{  font-size: 0px;}
 h1:after {
    content: "new content";
    font-size: 15px;
  }

Solution 14:^[14]

The answer is to create a span with the property

{display:none;}

You can find an example at this site

Solution 15:^[15]

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

http://www.alistapart.com/articles/fir

http://veerle.duoh.com/blog/links/#l-10

Solution 16:^[16]

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 17:^[17]

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 18:^[18]

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 19:^[19]

h1 {
    text-indent: -3000px; 
    line-height: 3000px;
    background-image: url(/LOGO.png);
    height: 100px; width:  600px;  /* height and width are a must */

}

Solution 20:^[20]

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 21:^[21]

I usually use:

span.hide
{
  position:fixed;
  right:-5000px;
}

Solution 22:^[22]

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:^[23]

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 24:^[24]

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 25:^[25]

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 26:^[26]

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 27:^[27]

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 28:^[28]

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 29:^[29]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	nesono
Solution 2
Solution 3	Robert
Solution 4	Community
Solution 5	chocolata
Solution 6	Karol S
Solution 7	Pier
Solution 8	Kyle
Solution 9
Solution 10	Linus Caldwell
Solution 11	Linus Caldwell
Solution 12	franzlorenzon
Solution 13	Hossein Hajizadeh
Solution 14	Andrei Krotkov
Solution 15	willoller
Solution 16	Jack Keller
Solution 17	Umesh Aawte
Solution 18	Cafe Coder
Solution 19	Georgi Nikolov
Solution 20
Solution 21	Anze
Solution 22	ASR
Solution 23	HelpNeeder
Solution 24	Mr Lister
Solution 25	Pegues
Solution 26	WebSmithery
Solution 27	Karson
Solution 28	SÃ©bastien Gicquel
Solution 29

'Hide text using css

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Hiding text with accessibility in mind:

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]

Solution 19:[19]

Solution 20:[20]

Solution 21:[21]

Solution 22:[22]

Solution 23:[23]

Solution 24:[24]

Solution 25:[25]

Solution 26:[26]

Solution 27:[27]

Solution 28:[28]

Solution 29:[29]