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. Action hooks that trigger on, before or after add, update or delete actions of option - WordPress
  2. Get all variations of a variable product - WooCommerce
  3. Generate random string - Python
  4. Split domain from an email address - Python
  5. Get upcoming N days - PHP

Your Questions / Comments

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