Sarathlal N

Hide text using CSS – a neat and better approch

If we want to hide some text content in our HTML page, we can simply use CSS display property to hide them.

.hide-text {
 display: none;

But this will completely avoid rendering of text and by the way it will hide our content for devices like screen readers etc.

So to avoid this situations, we can use a better method to hide text.

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

Recent Posts

  1. Redirect single pages of post type in to post type archive page - WordPress
  2. Get details about available image sizes - WordPress
  3. Change shipping and billing address title - WooCommerce
  4. Add phone number to the output of the addresses on the "My Account" page - WooCommerce
  5. Conditional tags for order thank you page - WooCommerce

Your Questions / Comments

If you found this article interesting, found errors, or just want to discuss about them, please get in touch.