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;
}

Looking for a skilled WordPress/WooCommerce developer? I'm currently available for freelance, contract, or full-time remote opportunities! Let's create something amazing together. Send me a quick message, and I'll respond within 24 hours!

Recent Posts

  1. Scaling WordPress - How Custom Database Tables Solve the Post Meta Bottleneck
  2. WordPress Transients Explained - A Developer's Guide to Site Performance
  3. Behind the Click - The Hidden Journey of Your Web Requests
  4. Automating Code Linting with GitHub Actions for WordPress Plugins
  5. Comprehensive Guide to Linting PHP, JavaScript, and CSS in WordPress Plugins Using Composer

This article was published on

Your Questions / Comments

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