在离子列表的离子项目的第一行剪切了单词

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
}

祝好运。