如何使离子项目响应

Question

.html

<ion-content>
   <ion-item>
     <div>User Name</div>
     <ion-icon item-right name="arrow-forward"></ion-icon>
     <div>You can have a unique username</div>
   </ion-item>
</ion-content>

根据上面的代码，我的结构如下：

当我减小屏幕宽度时，它看起来如下

剪辑内容并且内容和箭头之间没有固定间隙，这非常没有反应。我怎样才能让它响应？

Answer 1

喜欢Suraj指出尝试添加text-wrap

 <ion-item>
    <div text-wrap>
       <p>User Name</p>
       <p>You can have a unique username</p>
    </div>
    <ion-icon item-right name="arrow-forward"></ion-icon>
</ion-item>

如何使离子项目响应

How to make the ion-item responsive

html

css

ionic-framework

ionic2

ionic3