Ion-item doesn't break long text


#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?

#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 ;
}

#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!


#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>