How to text wrap

Please excuse this newbie question. I have some text pulled from an area and when displayed on the phone it longer than the screen size an continues off screen. I would like to do a simple text-wrapping which is usually no problem using CSS, but somehow it doesn’t work here - can you help me?

1 Like

I made my own css class, and referenced it after ionic.css. The following will cause text to wrap on ion-items

.item.wrap, .item-content.wrap {
white-space: normal;

so, like

<ion-item class="wrap">

Thank you so much for this! best regards, Jeppe

1 Like

That didn’t work for me :frowning:

use Ionic’s predefined style :slight_smile:

<ion-item class="item-text-wrap">

HTH :sunglasses:


hey it worked for me


I’m trying to use that class into a card header and it doesn’t work for me. This is the fragment of code that I’m using into the card-header.

<ion-item class="item-text-wrap">

Do you know why?.

Works for me !! thanks :smiley:

1 Like

even it was not working for me… :frowning:

<div class="card">
  <div class="item">
  <div class="item item-body">
    <ion-item class="item-text-wrap" ng-repeat="notification in vm.notifications">

In Ionic 2, use the text-wrap attribute to work like a charm. :slight_smile:

<ion-item text-wrap>
  text here wraps to multiple lines

Hey this work for me thank :+1:

You have to use CSS shape property for that.

best to use utility attributes.

this is a part of the docs you should check out:

Thanks this really works for in Ionic 3