在離子列表的離子項目的第一行剪切了單詞

Question

離子3，我使用的是離子清單，里面有一個離子項目，但是每個離子項目內部的第一行都被剪掉了。 如您所見，大寫字母“ A”並不完全可見。 你能幫助我嗎？ 謝謝

這是我的代碼和屏幕截圖

<ion-list>
 <li *ngFor="let risultato of risultatiFiltered">
  <ion-item text-wrap>
   <h3> Activity: {{risultato.activity}} </h3>          
   <h3> Time: {{risultato.time}} </h3>
   <h3> Score: {{risultato.score}} </h3>
  </ion-item>
 </li>
</ion-list>

Answer 1

這個問題似乎會影響所有<ion-item />元素，而不僅僅是第一個（和/或最后一個），我將從嘗試更改<ion-item />的font-size或overflow <ion-item />標簽。

例如，您可以使用overflow-y屬性刪除頂部/底部的“裁剪” （對不起，我沒有更好的詞來形容它）：

ion-item {
  overflow-y: visible
}

您還可以嘗試減小font-size ，例如，如果當前的font-size為16px ，則可以嘗試將其設置為：

ion-item {
  font-size: 14px
}

盡管您應該對其進行調整，以了解最有效的方法。

更新：您正在使用box-sizing嗎？ 因為如果不是這樣，則應檢查填充，因為它可能會影響<ion-item />元素的大小，從而導致其隱藏它的溢出。

如果是這種情況，請使用以下命令將其刪除：

ion-item {
  overflow-y: visible
}

應該管用。 您還可以使用以下命令完全消除溢出：

ion-item {
  overflow: visible
}

祝好運。