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. Automating Release Generation with GitHub Actions
2. WP CLI Commands to Bulk Delete Entries in WordPress Database
3. Split a Single CSV File into Multiple Files Using the Split Command - Bash
4. Migrating code repo from BitBucket to GitHub
5. Streamlining Development - Our Journey with Git, Bitbucket, and Jira

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.