离子标签未在 Ionic2 中显示整个文本

Posted 2023-03-13

【中文标题】离子标签未在 Ionic2 中显示整个文本

【英文标题】：ion-label is not displaying whole text in Ionic2

【发布时间】：2016-12-22 10:37:49

【问题描述】：

我在 ion-item 中使用了 ion-label，但没有显示描述（而是显示点-点..）我希望它显示整个文本..有什么解决方案吗？

<ion-card *ngFor="let product of products">
    <img [src]="product.imageURL" />
    <ion-card-content>
        <ion-card-title primary [innerhtml]="product.title"></ion-card-title>
        <ion-item class="item-text-wrap">
        <ion-item>
            <ion-label primary>Description</ion-label>
            <ion-label [innerHTML]="product.description"></ion-label>
        </ion-item>
    </ion-card-content>
</ion-card>

【参考方案1】：

更新

你也可以像这样在ion-card中设置text-wrap属性

<ion-card text-wrap *ngFor="let product of products">
...
</ion-card>

额外提示：如果您将text-wrap（作为属性，而不是作为类）放在ion-list 中，则该列表中的所有项目都将应用text-wrap 效果。这样您就不需要将text-wrap 属性放在所有项目中，这将帮助您稍微优化您的应用程序。

---

旧答案：

您可以使用ion-textarea（已禁用）来显示说明。查找有关 ion-textarea 元素 here 的更多信息。

<ion-card *ngFor="let product of products">
    <img [src]="product.imageURL" />
    <ion-card-content>
        <ion-card-title primary> product.title </ion-card-title>
        <ion-item>
            <ion-label primary>Description</ion-label>
            <ion-textarea rows="6" disabled [value]="product.description"></ion-textarea>
        </ion-item>
    </ion-card-content>
</ion-card>

rows 属性允许您根据描述文本的长度来设置要显示的行数。通过使用disable 属性，ion-textarea 类似于label，但显示不止一行内容。最后但并非最不重要的一点是，我使用value 属性来设置带有产品描述的元素内容。

关于您的代码的一些问题：

您打开了两个 ion-item 元素，但只关闭了其中一个

<ion-item class="item-text-wrap">
        <ion-item>
        <!-- ... -->
</ion-item>

除了使用[innerHTML]属性绑定产品标题，你可以只使用插值

<ion-card-title primary> product.title </ion-card-title>

【讨论】：

谢谢！有用的建议。

很高兴我能帮上忙 :)

[innerHtml] 如果您有要显示的 html 内容很有用。不过 product.title 不太可能。

【参考方案2】：

对我来说，IONIC 3.x 的目标是将标志放在主要位置：

<ion-label primary>collection response:  this.response  </ion-label>