因为ionic各种不同的版本其UI库存在差异,所以并不能保证每一个开发的文字显示自动换行。
那么只需要在必须要换行的块里加入样式设置即可:white-space:normal;
chat.page.html
...
<ion-content>
<div *ngFor="let message of messageList" class="message-wrapper">
<div>
<img class="{{message.imgClass}}" src="{{message.pic}}" />
<div class="{{message.textClass}}">
<font style="font-size:16px;white-space:normal">
{{message.text}}
</font>
</div>
</div>
<div class="cf"></div>
</div>
</ion-content>
...