时间戳

首页 > 解决方案 > 在 ion-list 中的 ion-item 的第一行中切出单词

css - 在 ion-list 中的 ion-item 的第一行中切出单词

问题描述

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>

截屏

标签： cssionic-framework

解决方案

这个问题似乎会影响所有<ion-item />元素，而不仅仅是第一个（和/或最后一个）元素，我会首先尝试更改标签的font-sizeor 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
}

祝你好运。

推荐阅读