Ion-item doesn't break long text

ionic-v1
1

When I put a long text into an ion-item it doesn’t wrap it correctly. The text leaves the screen on the right site and doesn’t start a new line. I tried to put a

into the ion-item but that doesn’t help. Any solutions for that?
1 Like
2

This is the default for ion-item, but you can over ride it with this css.

.item{
  overflow: inherit ;
  text-overflow: inherit ;
  white-space: wrap ;
}
1 Like
3

Thank you very much. white-space : wrap gave me an error due to a invalid property value but i changed it to white-space: normal and it worked! Thank you awesome support!

2 Likes
4

Works fine.

I created a css class called line-break in app.scsss and anywhere I need it just put on class.

.line-break{
  overflow: inherit ;
  text-overflow: inherit ;
  white-space: normal;
}

<div class="my-content line-break">long content</div>
5

Use ionic css class item-text-wrap , it will work fine.

<div class="item item-text-wrap">
<!-- Content -->
</div>