how to make text go to the next line instead of being cut

Question

I have the following code:

<div className={css.serviceInfo}>
        {availableServicesArray.map(service => {
          return(
            <span className={css.extraInfoLabel}>{service}</span>
          )
        })}
      </div>

which renders like this :

My question is: How can I make the span's text not be cut and go to the next line instead. I have tried with white-space:nowrap and white-space: initialbut none work.

Any idea how to do this ?

Thanks man! it worked. Feeling silly now for how easy it was — Bogos Robert, Jul 07 '21 at 06:10
No worries. Please support me by accepting the answer and upvoting. Thanks in advance — Abin Thaha, Jul 07 '21 at 06:11

score 1 · Accepted Answer · answered Jul 07 '21 at 06:08

1

Try giving

display: inline-block;

to the span

answered Jul 07 '21 at 06:08

Abin Thaha

4,493
3
13
41

how to make text go to the next line instead of being cut

1 Answers1