单词在 ion-list 中的 ion-item 的第一行被剪切答案

【问题标题】：Words are cut in first line of ion-item in ion-list单词在 ion-list 中的 ion-item 的第一行被剪切
【发布时间】：2018-10-23 04:40:16
【问题描述】：

Io ionic 3，我正在使用一个 ion-list，在其中我有一个 ion-item，但每个 ion-item 内的第一行都被剪切了。如您所见，大写的“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>

【问题讨论】：

我不熟悉ionic，但可能是您的css 中的line-height 太小了。尝试将其设置为高于您的文本大小。
只给它一个边距或填充顶部

标签： css ionic-framework

【解决方案1】：

此问题似乎会影响所有 <ion-item /> 元素，而不仅仅是第一个（和/或最后一个）元素，我将首先尝试更改 font-size 或 overflow 的 @987654324 @标签。

例如，您可以使用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
}

祝你好运。

【讨论】：