css - 防止 ionic 徽章折叠和隐藏信息

Question

我在同一条线上有很多 ionic 徽章。每个徽章都包含一个 ionic 图标和一些文本。当同一行有多个ion-badge时，为了显示所有的ion-badge，文本不显示。

HTML 如下(可以有更多 ionic 徽章):

<ion-item>
    <ion-badge slot="end" color="light">
        <ion-icon src="theSourceHere.svg"></ion-icon>
        Text
    </ion-badge>
    <ion-badge slot="end" color="light">
        <ion-icon src="theSourceHere.svg"></ion-icon>
        Text
    </ion-badge>
</ion-item>

除了 ionic 框架之外，我没有应用任何 CSS 或 SCSS，这里是 result .我已经查看 CSS 一段时间了，但目前还没有找到任何东西。

我试图允许 overflow-y 以便用户只需要滚动浏览徽章。

Answer 1

关闭<ion-item>标记并检查是否有效

希望这就是你的样子expecting使用 ionic 滚动和方向属性。