Ionic4 显示带换行符的文本

Question

我希望用户可以使用回车键在多行输入字段中插入文本。然后我想将文本保存在一个字符串中，然后将其发送到后端。在应用程序的详细信息页面上，我想显示插入的文本但带有换行符。

在输入的 html 文件中我尝试了这个

<div>
    <ion-item>
          <ion-textarea rows="5" name="description" type="text" 
               placeholder="Description" [(ngModel)]="description" required>
          </ion-textarea>
    </ion-item>
</div>

在 .ts 中，我对描述字符串进行编码

 this.description = encodeURI(this.description);

但是当我想在另一个 html 文件中显示插入的文本时

<ion-col size="12">
    <div class="idea-description">
      <ion-text style = "white-space: pre-wrap;">{{ idea.description }}</ion-text>
    </div>

它只显示编码文本，但没有换行符。

Answer 1

我在中找到了答案，所以我想在这里分享，以防你还没有找到它。

如果您将以下样式应用于元素，

\n 将显示为换行符：

white-space: pre-wrap

我将其添加到元素中，现在数据在我的 <ion-text> 元素中显示为换行符。

<ion-card-content class="" style="padding-top:0; white-space: pre-wrap;">
            <ion-text [innerHtml]="notification.content"></ion-text>
</ion-card-content>

Ionic4 显示带换行符的文本

Ionic4 show Text with line breaks

javascript

css

ionic-framework

ionic4