Html Ionic 3从变量换行文本

我正在建立一个聊天页面，聊天信息存储在服务器的数据库中。当用户打开聊天页面时，我从服务器检索聊天历史并在屏幕上加载它

问题在于包装长文本。“文本换行”（ionic属性）和CSS“word wrap:break word；”可以很好地处理页面上的静态文本，但不能处理来自服务器的动态文本

聊天页面HTML

<ion-content #content padding text-wrap>
<ion-list>
<ion-item *ngFor="let message of messages" no-lines text-wrap>
  <div *ngIf="message.status == '1'">
    <h3 class="left-message">
      <span>{{ message.sms }}</span>
    </h3>
  </div>
  <div *ngIf="message.status == '2'">
    <h3 class="right-message">
      <span>{{ message.sms }}</span>
    </h3>
  </div>
</ion-item>
 </ion-list>
</ion-content>

---

显示您的css类左消息和右消息更新代码thx。

 .left-message{
    color:white;
    float: left;
    white-space: normal;
    word-wrap: break-word;
 }
 .left-message span {
    background-color: rgb(127, 166, 245);
    margin-top:5px;
    border-radius:5px;
    padding:5px;
    display:flex;
    white-space: normal;
    word-wrap: break-word;
 }
 .right-message{
    color:grey;
    white-space: normal;
    float:right;
    word-wrap: break-word;
 }
 .right-message span {
    border-radius: 3px;
    background-color: rgb(216,216,217);
    margin-top:5px;
    border-radius:5px;
    padding:5px;
    display:flex;
    white-space: normal;
    word-wrap: break-word;
 }