My `white-space: normal`; css isn't wrapping text. Why is that?

Ionic Framework Ionic React
1

This is what my code looks like:

<IonHeader>
		<IonTitle class={`${styles.centertext}`}>some text that goes off the page</IonTitle>
</IonHeader>

this is from my scss file:

.centertext {
  text-align: center;
  white-space: normal;

}

When I put this in my iOS emulator it looks like

some text that goe....

because it reachest the end of the screen. I want it to do something like

some text that
goes off the page
2

It’s easier to debug using ionic serve in a PWA first, and then check your iOS app in the emulator.

When you’re debugging the PWA, you can use the browser dev tools to check why your white-space isn’t being applied as you expect. It’s probably the case that it is inheriting the value for white-space from some other line of CSS, but there’s no way to tell that based on the code you posted.

Also your code example says class= but for React it has to be className=.