Ionic3html5p标签没有为文本内容的大小扩展css也不起作用

Question

我正试图使html5 p标签在离子3离子物品标签内显示至少3行描述，如下所示：

<ion-item>
<ion-avatar item-start>
<img src="{{company.logo_url}}" alt="company_logo" *ngIf="company.logo_url">
</ion-avatar>
<h2>{{ company.company_name }}</h2>
<p class="desc-line">{{ company.description_short }}</p>
</ion-item>

我尝试使用的scs是：

.desc-line {
display:inline-block;
}

这不起作用，所以我也尝试了：

.desc-line {
display: -webkit-box;
overflow : hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; 
}

现在我不知道下一步该尝试什么，也没有找到任何其他类似的解决方案。

Answer 1

我还没有尝试过这个解决方案，但我认为它会起作用，

您可以设置最小高度，例如：

.desc-line {
min-height: 30px !important;
}

Answer 2

你没有做错任何事。

我在Stacklitz上也创建了一个演示。

您只需要将white-space: normal;添加到.labelCSS中即可。此外，Stacklitz不允许我更改SCSS文件中的.label，所以我为ion-label元素添加了内联样式。

.item {
.label {
white-space: normal;
}
}

如果这有帮助，请告诉我。