Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to Hide Text with CSS

There are many ways to Hide text with CSS, here are some CSS codes that you can use to hide a text within a particular markup just by using CSS.

Method 1


.hide-text {
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}

Way 2


.hide-text{
position: absolute;
top: -9999px;
left: -9999px;
}

Way 3


.hide-text {
text-indent: -9999em;
outline: 0;
}

.hide-text {
height: 0;
overflow: hidden;
position: absolute;
}

.hide-text {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
width: 1px;
overflow: hidden;
}

Method 4: On the button


.submitbutton {
display:block;
width:100px; height:25px;
background-image:url(image.jpg); background-repeat:no-repeat;
text-indent:-999px;
font-size:0px; line-height:0;
}

Method 5: Replace header text with image


h1 {
text-indent:-9999px;
margin:0 auto;
width:400px;
height:100px;
background:transparent url("images/logo.jpg") no-repeat scroll;
}

So some tricks How to Hide Text with CSS, hopefully, the readers helped with writing from this ARBloggerLab.


This post first appeared on AR Blogger Lab, please read the originial post: here

Share the post

How to Hide Text with CSS

×

Subscribe to Ar Blogger Lab

Get updates delivered right to your inbox!

Thank you for your subscription

×