在Ionic 3中实现文本触底自动换行的技术咨询

It looks like your long description text is overflowing instead of wrapping properly within the ion-col container. To get the text to wrap seamlessly when it hits the edge of its container (or the screen bottom, depending on layout), we can add targeted CSS properties to force proper line breaks.

Here's your modified code with the necessary styles to ensure text wraps correctly:

<div *ngIf="dado.currency_code == 'LTC'">
  <ion-row>
    <ion-col col-7>
      <p style="font-size: 13px;">{{dado.created_at}}</p>
      <!-- Added wrapping styles to the description paragraph -->
      <p style="font-size: 13px; white-space: normal; word-wrap: break-word; overflow-wrap: break-word;">
        {{dado.description}}
      </p>
    </ion-col>
    <ion-col col-5>
      <p style="font-size: 17px; color: #ff6a00;">...</p>
    </ion-col>
  </ion-row>
</div>

What Each Style Does: #

• white-space: normal: Overrides any default nowrap behavior that might be preventing line breaks.
• word-wrap: break-word: Allows long words or phrases to be split and wrapped onto the next line instead of overflowing.
• overflow-wrap: break-word: A more modern, robust alternative to word-wrap that handles edge cases (like non-Latin scripts) better.

If you want to apply this wrapping behavior globally to all text in your app (so you don't have to repeat the styles everywhere), add this to your app.scss file:

p, .ion-text {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

This will ensure all text elements wrap correctly, no matter how long the content is.

内容的提问来源于stack exchange，提问作者Lucas Zimmermann