如何在 Ionic 2+ 中换行离子输入？

Posted 2023-03-06

【中文标题】如何在 Ionic 2+ 中换行离子输入？

【英文标题】：How to Word Wrap ion-input in Ionic 2+?

【发布时间】：2018-02-01 17:27:38

【问题描述】：

如何在 Ionic 2 中换行 ion-input 组件？

这行得通：

<ion-item text-wrap>
    <div>A really realll really really loooooooonnngg text.</div>
</ion-item>

但这不是：

<ion-item text-wrap>
    <ion-input
    type="text"
    id="commuterLocation"
    name="commuterLocation"
    readonly=true
    placeholder="Enter your location"
    (focus)="onCommuterLocationFocus()"
    [(ngModel)]="_commuterLocation.description"></ion-input>
</ion-item>

编辑 1： 当我在带有常规html 元素的ion-item 上使用text-wrap 指令时，元素的内容按预期包装。但是ion-input 的输入文本没有......我该如何解决这个问题？提前感谢您的帮助。

【问题讨论】：

为什么不使用 ion-texarea？

你想达到什么目的？您可以添加屏幕截图或其他内容吗？它只是为了造型吗？因为 ion-item 中的输入不会比屏幕分辨率更远。

@SergioEscudero 嗯...打算试试...

好的。很好

【参考方案1】：

通过使用ion-textarea 而不是ion-input 解决了这个问题。

<ion-item text-wrap>
    <ion-textarea
    type="text"
    id="commuterLocation"
    name="commuterLocation"
    readonly=true
    placeholder="Enter your location"
    (focus)="onCommuterLocationFocus()"
    [(ngModel)]="_commuterLocation.description"></ion-textarea>
</ion-item>