Question

有没有办法在离子2中实现多行省略号文本。我有一个卡片视图，需要限制最多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;
}

离子2中的多线省略号

1 个答案: