ion-grid-文本格式

Question

我想在ion-grid字段中放入一些文本，但我不明白为什么文本会超出字段并超过ion-grid。 我想使其具有响应性，所以我不想使用height：100px（例如）。我知道如果将段落设置为高度：100px，溢出：自动，它将起作用，它将根据需要剪切文本，并且可以通过滚动来移动它。

这就是我想要的设计。

这是我添加文字时的样子。

有代码 CSS文件

ion-content {
    display: flex;
    height: 100vh;
    width: 100vw;
}

ion-grid {
    display: flex;
    flex-direction: column;
    height: 91%;
    width: 100%;
}

html文件

<ion-content *ngIf="infoData && infoData.length > 0">
  <ion-grid>
    <ion-row>
        <ion-col>
          <h5>Row 1 Col 1</h5>
          <img src="{{infoData[0].img1}}">
        </ion-col>
        <ion-col>
          <h5>Row 1 Col 2</h5>
          <p>{{infoData[0].description}}</p>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
          <h5>Row 2 Col 1</h5>
          <img src="{{infoData[0].img2}}">
        </ion-col>
        <ion-col>
          <h5>Row 2 Col 2</h5>
          <img src="{{infoData[0].img3}}">
        </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>