ionic 聊天界面内聊天内容自动换行

最新推荐文章于 2021-08-14 09:07:38 发布

原创最新推荐文章于 2021-08-14 09:07:38 发布 · 567 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ionic

ionic 专栏收录该内容

3 篇文章

订阅专栏

本文介绍在使用Ionic开发过程中，如何解决不同版本UI库导致的文字显示不自动换行问题。通过在特定元素中添加CSS样式white-space:normal，确保了文字能够正确换行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为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>
...