ionic-framework - ionic 2 中的多行省略号

Question

有没有办法在 ionic 2 中实现多行省略号文本。我有一个卡片 View ，需要限制最多 2 行以垂直居中对齐方式显示在其中。我尝试了 webkit css 选项，但它不起作用。我看到其他人提出了类似的问题，但无法找到答案。 下面是我的html代码

 <ion-content class="cards-bg light-gray">
    <ion-list>
        <ion-card *ngFor="let od of orderDetails” class="fade_logo">
            <ion-card-content> {{od.description}} </ion-card-content>
        </ion-card>
    </ion-list>
 </ion-content>

这里的订单描述是长文本，我只需要显示2行。

Answer 1

这取决于字体大小和行高，但请将其放入您的 .scss 文件中，并更改 height: 以获得最佳结果。

ion-card-content {
    display: block;
    display: -webkit-box;
    height: 60px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}