bug: ion-toast wrong wrapping when using inside

Bug Report

Ionic version:

[x] 4.x
[x] probably also 5.x

Current behavior:
I’m using an ion-toast. I’m using <b> tags in my toast message. The white-space: pre-wrap makes the toast wrapping behave wrong when the text wraps directly after the closing </b>.

As you can see the next line is indented by one space:
image

Expected behavior:
The correct behavior is achieved with either white-space: normal or white-space: pre-line:
image

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#Values

Related code:
The last change of this was here: #16360

Other information:
It would be great if this could be backported to 4.X
I can open a PR if you want. If there’s something I have to know to get this backported, please tell me, thanks!

Ionic info:

Ionic:

   Ionic CLI                     : 6.1.0 (/home/rafael/.nvm/versions/node/v13.7.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.803.19
   @angular-devkit/schematics    : 8.3.19
   @angular/cli                  : 8.3.19
   @ionic/angular-toolkit        : 2.1.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 16 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.3.0

System:

   Android SDK Tools : 26.1.1 (/opt/android-sdk-linux)
   NodeJS            : v13.7.0 (/home/rafael/.nvm/versions/node/v13.7.0/bin/node)
   npm               : 6.13.6
   OS                : Linux 5.3

1 possible answer(s) on “bug: ion-toast wrong wrapping when using inside

  1. Thanks for the issue! I can confirm that this should be pre-line. I have created a PR for this fix; however, Ionic Framework v4 is only receiving critical security fixes, so this fix will be available in Ionic Framework v5.