How to line break words in span

Asked Mar 23 '20 at 14:33

Active Mar 23 '20 at 14:35

Viewed 41 times

I have span inside text like this

<span class='btntext'>New Item</span>

How to show words like

New
Item

I tried white-space:nowrap; and word-break:break-all; but not worked...

.btntext{
  font-size: 12px;
}

Any ideas?

edited Mar 23 '20 at 14:35

johannchopin

asked Mar 23 '20 at 14:33

saulyasar

1

Why not just use `html`? => `New
Item` – johannchopin Mar 23 '20 at 14:34
"I have span inside text like this". Did you mean you have text inside a span – j08691 Mar 23 '20 at 14:34
@j08691 yes let me fix – saulyasar Mar 23 '20 at 14:35
restrict the width of the span and apply display:inline-block to it – Temani Afif Mar 23 '20 at 14:35
1

Have you seen [this question?](https://stackoverflow.com/questions/33300106/break-line-on-white-space-between-words) – Evan Bechtol Mar 23 '20 at 14:35
@johannchopin The `
` tag does not use and does not need a closing slash and never has in HTML. – Rob Mar 23 '20 at 14:36
@johannchopin dirty way pls... – saulyasar Mar 23 '20 at 14:38
@EvanBechtol no – saulyasar Mar 23 '20 at 14:39
@Rob Of course sorry I'm too used to `jsx` – johannchopin Mar 23 '20 at 14:39
1

You need to limit the size of the span and set the `word-break`, or `letter-spacing` property on the span itself. Otherwise the text has no way of wrapping like you want, and will almost certainly have different behavior on different viewport sizes. – Evan Bechtol Mar 23 '20 at 14:44
@EvanBechtol can you write an example – saulyasar Mar 23 '20 at 14:49
The example is in the answer that I linked to you. Or the one at the top of your question. – Evan Bechtol Mar 23 '20 at 14:55

0 Answers0