CODEWITHSUNDEEP
css
DNac
DNac

Reputation: 2783

Hide specific part of text using CSS

Let's suppose I have the following text strings within a CSS class:

Text:

(2) 91-180
2, 91-180

Class:

<text class="nv-legend-text">(2) 91-180</text>

Is there, by any chance, a way how to hide the (2) or 2, using CSS so only the text 91-180 is shown?

I have no other way how can I control/adjust the code itself, only custom CSS.

Upvotes: 1

Views: 331

Answers (2)

Temani Afif
Temani Afif

Reputation: 272648

Use text-indent but you will need a specific value based on the font metrics:

text {
  display: inline-block;
  text-indent: -18px;
  overflow: hidden;
}
<text class="nv-legend-text">(2) 91-180</text>

Upvotes: 3

Yong
Yong

Reputation: 1685

You can wrap the text you want to hide and either use display: none; to make it disappear. Or color: transparent; to make the text transparent. See the snippet below for your reference:

.ex1{
  display: none;
}
.ex2{
  color: transparent;
}
<p><span class="ex1">(2)</span>018231</p>
<p><span class="ex2">(2)</span>018231</p>

Upvotes: 0

Related Questions