text-indent: -9999px; revisited

Turns out, this works even better (and is more concise):

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

As Zeldman put it:

  • Really long strings of text will never flow into the container because they always flow away from the container.
  • Performance is dramatically improved because a 9999px box is not drawn. Noticeably so in animations on the iPad 1.

(via Zeldman)

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.