1

How to hide In stock Text only using CSS? Advance wishes..

<span class="option__title option__title testdhana">In stock | <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>12.00</span> | CHICKEN BIRYANI</span>
ikiK
  • 6,328
  • 4
  • 20
  • 40
Murugan Vellaisamy
  • 334
  • 3
  • 15
  • All conent of testdhana is possible only text "In Stock" without change code no. – Simone Rossaini Jul 30 '20 at 13:19
  • You need JS for this. Or change html... – ikiK Jul 30 '20 at 13:23
  • This data load in search result if i type anything in search input. So jquery is not response well when i type 3 text in the input. – Murugan Vellaisamy Jul 30 '20 at 13:27
  • Best practice is to wrap the most atomic text you want to target in its own element. Otherwise as mentioned you really need to use JS for this to avoid hacks. – TylerH Jul 30 '20 at 13:40
  • @TylerH none of the duplicates give an answer for this case :) there is two text node inside the span, if it was only one text node then we can apply this duplicate: https://stackoverflow.com/q/15196630/8620333 – Temani Afif Jul 30 '20 at 13:52
  • OP is asking how to target part of a text node. All of the above dupes apply. The only one that doesn't *directly* apply is the "target direct text and not text within tags" one, but it has useful answers on how to use JS to accomplish OP's goal here. – TylerH Jul 30 '20 at 13:57
  • Please understand this is not duplicate question. In my case it have two plain text. first and last. middle is another one span. – Murugan Vellaisamy Jul 30 '20 at 15:44

2 Answers2

3

Use negative text-indent and hide the overflow

.option__title {
  display:block;
  overflow:hidden;
  text-indent:-60px; /* adjust this */
}
<span class="option__title option__title testdhana">In stock | <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>12.00</span> | CHICKEN BIRYANI</span>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
-3

.d-none{
  display: none;
}
<span class="option__title option__title testdhana"><span class="d-none">In stock</span> | <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>12.00</span> | CHICKEN BIRYANI</span>

You can also hide | just wrap it also inside span if you needed.

Rahul Panwar
  • 100
  • 10