Hide specific part of text using CSS

Question

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.

can't you just wrap (2) inside a span assign the said span with a class and give it a property of display: none;? — Yong
– Yong, Commented Feb 2, 2022 at 8:42
Without changing the HTML structure, there is no way for CSS to use logic and "find" or "grab" something and remove/hide it. CSS can only apply styles to elements that have a selector like tag, class, id etc. — George Chond
– George Chond, Commented Feb 2, 2022 at 8:50
I don't their is any way to make css see the text differently without changing html or adding some js. You CAN increase the text indent a bit more. But that wont work if the text to be hidden isn't at start or if it's longer/shorter then a specific number... — Was
– Was, Commented Feb 2, 2022 at 9:08

Temani Afif · Accepted Answer · 2022-02-02 08:51:53Z

3

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>

answered Feb 2, 2022 at 8:51

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

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

1 Comment

Was Over a year ago

yeah, with only custom css this looks like the best (if not only) option out there

Yong · Accepted Answer · 2022-02-02 08:46:45Z

0

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>

answered Feb 2, 2022 at 8:46

Yong

1,7151 gold badge9 silver badges30 bronze badges

4 Comments

Temani Afif Over a year ago

if they can wrap the text, why not simply removing it? from the question: only custom CSS.

Yong Over a year ago

So they may manipulate it still with js if they want to? There's a difference with it not being in the DOM at all, and then just for it to be hidden temporarily, no?

Temani Afif Over a year ago

that's not the question. I don't see any DOM manipulation requirement or JS involved in the question

Yong Over a year ago

I'm just answering your question of why not simply removing it?

Collectives™ on Stack Overflow

Hide specific part of text using CSS

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related