Hide Text with CSS, Best Practice?

Question

Let's say I have this element for displaying the website logo:

<div id="web-title">
  <a href="http://website.com" title="Website" rel="home">
    <span>Website Name</span>
  </a>
</div>

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:

#web-title span { text-indent: -9999px; }

or

#web-title span { font-size: -9999px; }

or

#web-title span { position: absolute; top: -9999px; left: -9999px; }

I've also seen some combine those three methods. But actually which one is the best practice to hide text effectively?

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 — Mark Segal
– Mark Segal, Commented Oct 8, 2012 at 14:11
I would say that it depends on if you want the text (that isn't there) should take up the place it originally has. — Alfred Larsson
– Alfred Larsson, Commented Oct 8, 2012 at 14:11
Here's a list of most image replacement techniques, their pros and cons: css-tricks.com/examples/ImageReplacement — coopersita
– coopersita, Commented Oct 8, 2012 at 14:36
more up-to-date roundup of techniques: css-tricks.com/the-image-replacement-museum — ptim
– ptim, Commented Feb 9, 2017 at 0:05

coopersita · Accepted Answer · 2015-06-21 12:43:54Z

80

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

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

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.

edited Jun 21, 2015 at 12:43

answered Oct 8, 2012 at 14:12

coopersita

5,0793 gold badges32 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Danger14 Over a year ago

This is great. How'd you discover this?

coopersita Over a year ago

@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.

thdoan Over a year ago

Another method using clip:rect(): developer.yahoo.com/blogs/ydn/…

deathlock Over a year ago

Just updating: what about the New Kellum Method? scottkellum.com/2013/10/25/the-new-kellum-method.html

Daniel Over a year ago

It will destroy your table cells if you do text-indent: 100%.

|

Yukulélé · Accepted Answer · 2015-02-01 17:38:36Z

19

you can simply make it transparent

{
   width: 20px;
   height: 20px;
   overflow: hidden; 
   color:transparent;
}

answered Feb 1, 2015 at 17:38

Yukulélé

17.4k12 gold badges78 silver badges105 bronze badges

2 Comments

Dan Beaulieu Over a year ago

+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.

Brad Johnson Over a year ago

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.

Mr. Alien · Accepted Answer · 2012-10-08 14:10:51Z

6

Can't you use simply display: none; like this

HTML

<div id="web-title">
   <a href="http://website.com" title="Website" rel="home">
       <span class="webname">Website Name</span>
   </a>
</div>

CSS

.webname {
   display: none;
}

Or how about playing with visibility if you are concerned to reserve the space

.webname {
   visibility: hidden;
}

answered Oct 8, 2012 at 14:10

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

9 Comments

coopersita Over a year ago

Display:none has very bad implications for people using screen readers. It's a big accessibility no-no.

millimoose Over a year ago

@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.

Mr. Alien Over a year ago

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?

coopersita Over a year ago

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.

coopersita Over a year ago

@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...

|

Mark · Accepted Answer · 2012-10-08 14:49:50Z

3

the way most developers will do is:

<div id="web-title">
   <a href="http://website.com" title="Website" rel="home">
       <span class="webname">Website Name</span>
   </a>
</div>

.webname {
   display: none;
}

I used to do it too, until i realized that you are hiding content for devices. aka screen-readers and such.

So by passing:

#web-title span {text-indent: -9000em;}

you ensure that the text still is readable.

answered Oct 8, 2012 at 14:49

Mark

6,8731 gold badge35 silver badges51 bronze badges

1 Comment

Mana Over a year ago

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.

Dhruv Batheja · Accepted Answer · 2016-06-27 06:59:23Z

2

Add .hide-text class to your span that has the text

.hide-text{
display:none;
 }

or make the text transparent

.hide-text{
 color:rgba(0,0,0,0);
 }

use according to your use case.

answered Jun 27, 2016 at 6:59

Dhruv Batheja

2,4102 gold badges20 silver badges16 bronze badges

1 Comment

deathlock Over a year ago

As others have said, display: none has a very bad implication for screen reader. stackoverflow.com/a/12783474/651170

isapir · Accepted Answer · 2016-07-22 19:06:15Z

1

I do it like this:

.hidden-text {
  left: 100%;
  display: inline-block;
  position: fixed;
}

answered Jul 22, 2016 at 19:06

isapir

24.1k16 gold badges127 silver badges123 bronze badges

Comments

Pikamander2 · Accepted Answer · 2023-10-24 15:18:38Z

1

Here's another option that works for some use cases:

.myelement
{
    font-size: 0;
    color: transparent;
    user-select: none;
}

Depending on what you're trying to do and what other styles are already being applied, you may also want to explicitly set the width and height:

.myelement
{
    font-size: 0;
    color: transparent;
    user-select: none;
    width: 200px;
    height: 100px;
}

answered Oct 24, 2023 at 15:18

Pikamander2

8,4504 gold badges58 silver badges75 bronze badges

Comments

millimoose · Accepted Answer · 2012-10-08 14:32:10Z

0

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:

.ui-helper-hidden-accessible { 
    position: absolute !important; 
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px,1px,1px,1px); 
}

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.

answered Oct 8, 2012 at 14:32

millimoose

40.1k11 gold badges90 silver badges138 bronze badges

Comments

Neeraj · Accepted Answer · 2013-04-12 04:52:24Z

0

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.

This is straight from the horse's mouth: http://www.youtube.com/watch?v=fBLvn_WkDJ4

answered Apr 12, 2013 at 4:52

Neeraj

1421 silver badge7 bronze badges

Comments

Joel Kinzel · Accepted Answer · 2015-09-24 15:09:14Z

0

As of September of 2015, the most common practice is to use the following CSS:

.sr-only{
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
}

answered Sep 24, 2015 at 15:09

Joel Kinzel

9702 gold badges7 silver badges19 bronze badges

1 Comment

chap Over a year ago

According to MDN the clip property is now deprecated. developer.mozilla.org/en/docs/Web/CSS/clip

atazmin · Accepted Answer · 2020-11-13 04:34:38Z

0

Another way

position: absolute;
top: 0px;
left: -5000px;

answered Nov 13, 2020 at 4:34

atazmin

5,8751 gold badge41 silver badges31 bronze badges

Comments

en0ndev · Accepted Answer · 2020-12-24 20:49:10Z

0

It might work.

.hide-text {
    opacity:0;
    pointer-events:none;
    overflow:hidden;
}

edited Dec 24, 2020 at 20:49

answered Dec 24, 2020 at 18:13

en0ndev

6901 gold badge7 silver badges19 bronze badges

Collectives™ on Stack Overflow

Hide Text with CSS, Best Practice?

12 Answers 12

9 Comments

2 Comments

9 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

9 Comments

2 Comments

9 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related