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. Replace string in multiple files - Command line
  2. Solve Grunt error - Port 35729 is already in use by another process
  3. Install WP-CLI
  4. Install LAMP - Apache2 , MariaDB, PHP 7 on Debian 8
  5. Enable / Disable Magento 2 module using command line


Questions / Comments

If you found this article interesting, found errors, or just want to discuss about them, please get in touch. Send an email to hello@sarathlal.com & I like your words.