Ionic2 toast 中是否可以有换行符？

Question

我两种都试过了 和 < br/ >，但不幸的是不起作用！

这可能吗？

//Displaying toast to welcome user!
let user = this.currentUser();
//console.log(user);
let toast = Toast.create({
  message: 'Hi ' + user.email + '! <br/> Welcome to My App',
  duration: 5000,
  position: 'bottom'
});

toast.onDismiss(() => {
  console.log('Dismissed toast');
});

this.nav.present(toast);

Answer 1

其实这是可能的。您可以执行以下操作：

.toast-message {
  white-space: pre;
}

和

\n

用于换行。

注意：查看

home.ts

和

style.css

。

参见工作plunkr

Answer 2

虽然 @iWork 解决方案适用于许多情况，但如果您的 toast 中有

close

按钮，它将被推出屏幕。

所以你可以使用这些样式表来代替：

.toast-message {
  white-space: pre-line;
}

p.s，您需要使用

\n

在字符串中换行

Answer 3

很多年后我已经在 ionic 7 上看到这篇文章了。原始答案仍然有效，但由于 ionic 现在也在 ion-toast 中使用阴影部分，因此您必须使用 css 部分：

ion-toast::part(message) {
  white-space: pre;
}

并提醒使用

\n

进行换行。