Hide Text Using Css

Hide text using css

This is one way:

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

h1 a {
    outline: none;  /* prevents dotted line when link is active */
}

Here is another way to hide the text while avoiding the huge 9999 pixel box that the browser will create:

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

Hide text using CSS to not take page space

A few things can make text take up zero space:

Make the text element display: none (this makes the element completely disappear; can't be animated with CSS).
Make the text element line-height: 0 or height: 0 depending on your use case (can be animated with CSS). The element can disappear if you use opacity: 0 as well.
Make the text element position: absolute which takes it out of the normal flow structure. You can anchor it to an absolute, relative, or fixed parent (can be animated more dynamically, but can get complicated).

Those are the most-used ones off the top of my head. Others are welcome to edit this answer and add to this list.

The solution to the asker's question in JSFiddle form: jsfiddle.net/v9swdxhj/2

Note: I removed some unused elements, including an unclosed element. Look out for those!

Hide text at onClick using css

Just do it like this:

#show,#content{display:none;}
#show:checked~#content{display:block;}
#show:checked~#more{display:none;}

<input id="show" type=checkbox>
<div id="content">
<p>Any help would be appreciated</p>
<label for="show" style="color: red;">Hide</label>
</div>
<label for="show" id="more">read more</label>

Hide text, leave icon elements

You can set the font size to zero:

.btn { font-size: 0; }

If your icons contain text, overwrite their font size:

.fa { font-size: initial; }

css hide text in form block

You could use the visibility property here.

The visibility property is different than the display property in that it allows a parent element to be hidden and a child to be visible.

div.tree-control form {
    visibility: hidden; /* hide the whole form */
}

div.tree-control form > div:first-of-type {
    visibility: visible; /* make the first div in the form visible */
}

div.tree-control form {    visibility: hidden;}
div.tree-control form > div:first-of-type {    visibility: visible;}

<div class="tree-control"><form>   <div class="input-append" style="margin-right: 10px;">       <input class="tree-search" type="text">       <button title="search" class="btn tree-search-btn" type="button"/>   </div>
   some text
</form></div>

How do I hide text node keeping element's background and sizing?

OK, after a bit of research and an advice from a fellow developer I came up with the following:

button {  text-indent: -1000000%;}

<button>some text here</button>