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;

Need Help?

Do you need any help on CSS3 & CSS? I'm happy to help you.

Contact Me

Recent Posts

  1. Get variation product data on selecting variation options - WooCommerce
  2. Add TinyMCE WYSIWYG (Rich text area) meta box - WordPress
  3. Reorder product tabs in single product page - WooCommerce
  4. Download webpage for offline reading - wget
  5. Remove product tabs in single product page - WooCommerce

Your Questions / Comments

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