How to text wrap

ionic-v1
1

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
2

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">
 {{textThatMayBeTooLong}}
</ion-item>
7 Likes
3

Thank you so much for this! best regards, Jeppe

1 Like
4

That didn’t work for me :frowning:

5

use Ionic’s predefined style :slight_smile:

<ion-item class="item-text-wrap">
 {{textThatMayBeTooLong}}
</ion-item>

HTH :sunglasses:

8 Likes
6

hey it worked for me

7

Hi,

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">
      <h5>{{promotion.description}}</h5>
</ion-item>

Do you know why?.
Thx

8

Works for me !! thanks :smiley:

1 Like
9

even it was not working for me… :frowning:

<div class="card">
  <div class="item">
    <h2>NOTIFICATIONS & ALERTS</h2>
  </div>
  <div class="item item-body">
    <ion-item class="item-text-wrap" ng-repeat="notification in vm.notifications">
      {{notification.ArisNotificationMessage}}
    </ion-item>
  </div>
</div>

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
</ion-item>
2 Likes
11

Hey this work for me thank :+1:

12

You have to use CSS shape property for that.

13

best to use utility attributes.

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

14

Thanks this really works for in Ionic 3