Reputation: 43

How to HIDE text with CSS?

Have this code:

<h4 class="ihf-price" style="margin-right:10px;">
   <span class="ihf-for-sale-price"> $16,750,000 </span> (Fee Simple)
</h4> </div> </div>

How do I hide the text "(Fee Simple)" from displaying?

Want the Price to show but not the "Fee Simple" text

Upvotes: 4

Answers (2)

Reputation: 272901

You can use a font-size trick like this:

h4.ihf-price {
  font-size: 0;
}

h4.ihf-price span {
  font-size: initial;
}

<h4 class="ihf-price" style="margin-right:10px;">
  <span class="ihf-for-sale-price"> $16,750,000 </span> (Fee Simple)
</h4>

Or use color trick if you want to maintain the same content width of h4:

h4.ihf-price {
  color: #fff; /* Should be the same as background */
}

h4.ihf-price span {
  color: initial;
}

<h4 class="ihf-price" style="margin-right:10px;">
  <span class="ihf-for-sale-price"> $16,750,000 </span> (Fee Simple)
</h4>

Upvotes: 8

Reputation: 371231

Hide text in the entire element. Show text only in the nested element.

.ihf-price {
  font-size: 0;
}

.ihf-for-sale-price {
  font-size: 16px;
}

<h4 class="ihf-price" style="margin-right:10px;">
  <span class="ihf-for-sale-price"> $16,750,000 </span> (Fee Simple)
</h4>

.ihf-price {
  visibility: hidden;
}

.ihf-for-sale-price {
  visibility: visible;
}

<h4 class="ihf-price" style="margin-right:10px;">
  <span class="ihf-for-sale-price"> $16,750,000 </span> (Fee Simple)
</h4>

Upvotes: 2