Text-wrap on browser vs ios device


#1

Hey guys.

I am trying to do a code key where the each key pair sits in a column then will wrap depending on the device width. I don’t want the individual letters inside the columns to wrap so there is a text-wrap ->text-nowrap going on. I am seeing that on ionic serve, it displays fine but on device, the wrap does not wrap accordingly and some letters are missing because they are off the screen.

<h1>Code Key</h1>
<ion-grid>
	<ion-row text-wrap>
		<ion-col *ngFor="let letter of code.keys; let i = index" [attr.data-index]="i" text-nowrap>
			<span *ngIf="i%2  || difficulty != 'hard' "><strong>{{letter}}:</strong>{{code.map[letter]}}</span>
		</ion-col>
	</ion-row>
</ion-grid>

Here is on ionic serve

Here is the image of what it looks like on mobile.

I thought it would work like bootstrap where it would automatically move to a new line but I understand it may not. If you think there is a better way to display a code key, I am all ears.