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. Disabling Payment Methods in WooCommerce Based on Conditions
2. How to Update Product Quantity in WooCommerce Using Custom Code
3. Dynamically Generating a Table of Contents in WordPress
4. Direct Checkout in WooCommerce - Add Product to Cart from Checkout Page & Skip Shop, Product, and Cart Pages
5. Understanding the Impact of git reset --hard Command

This article was published on January 2, 2015

Your Questions / Comments

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