How to HIDE text with CSS?

Question

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

@FacundoCorradini if he can wrap it on span so he can simply remove it then, no ? — Temani Afif
– Temani Afif, Commented Feb 2, 2018 at 22:49
@TemaniAfif probably. Can't guess with such an incomplete and poor question as it was when we commented (no code provided at all), can we? — Facundo Corradini
– Facundo Corradini, Commented Feb 2, 2018 at 23:13
@FacundoCorradini i agree with this but my reflexion beyond the question was : why not simply recommend to remove the element instead of recommend to update the html and then add CSS to remove it :) — Temani Afif
– Temani Afif, Commented Feb 2, 2018 at 23:15
@TemaniAfif indeed. But at the moment, I thought there must have some reason he couldn't remove it, but don't want to show it. Probably wanted to keep it there for alternative styles, e.g. hiding it only when on mobile, keeping it there for print and not screen, etc. So spanning the part that would be hidden would have made some sense.... but anyway, it was just a really, really poor question. — Facundo Corradini
– Facundo Corradini, Commented Feb 2, 2018 at 23:19

Temani Afif · Accepted Answer · 2018-02-02 23:02:49Z

8

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>

edited Feb 2, 2018 at 23:02

answered Feb 2, 2018 at 22:50

Temani Afif

280k30 gold badges379 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Facundo Corradini Over a year ago

Font-size approach makes more sense than color or visibility ones for 99% of use cases, as the "hidden" part will not take space on the flow, and therefore allow borders, backgrounds etc to work correctly and don't interfere with other elements positioning :)

Temani Afif Over a year ago

@FacundoCorradini yes sure, i don't advise the color one too much but in some cases (that i faced before) we need to keep the width of content because of some alignment or other stuffs. So changing color won't change any position or alignment but of course this remain relative as we don't know the real context of this, maybe it's useless and the font-size trick will do it ;)

Michael Benjamin · Accepted Answer · 2018-02-02 22:55:31Z

2

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>

OR

.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>

edited Feb 2, 2018 at 22:55

answered Feb 2, 2018 at 22:49

Michael Benjamin

376k110 gold badges616 silver badges737 bronze badges

4 Comments

Temani Afif Over a year ago

intresting the visibility trick ... i always thought it works like opacity and display : if applied to parent you cannot override it in child element

Temani Afif Over a year ago

the only issue is that you cannot apply styling to h4 like border, background,etc

Michael Benjamin Over a year ago

Yeah, visibility is different in that way too. display: none and opacity wouldn't work here. And right about the border, background, etc. on the parent. But that was beyond the scope of this question. @TemaniAfif

Temani Afif Over a year ago

yes sure, it's out of the scope but it was a bit strange for me as i just discover it now, i didn't knew it before ;)

Collectives™ on Stack Overflow

How to HIDE text with CSS?

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related