CODEWITHSUNDEEP
htmlcssangularjsangularionic-framework
Nastyo
Nastyo

Reputation: 199

How to prevent item text wrap

Here's my code: 

<ion-list>
  <ion-item>
    <ion-avatar item-left>
      <img src="img/avatar-small.jpg">
    </ion-avatar>
    <h2>Alissa Connor said something</h2>
    <p>Sed ut perspiciatis unde omnis iste natus error sit Sed ut perspiciatis unde omnis iste natus error sit Sed ut perspiciatis unde omnis iste natus error sit </p>
  </ion-item>
</ion-list>

And what I get

And what I get

I maybe use the wrong element to do this, but I would like to see the whole text.

Any idea?

Upvotes: 2

Views: 1427

Answers (3)

user6408607
user6408607

Reputation:

white-space: nowrap; in the css on the appropriate class.

If you would like it to wrap, then white-space: wrap;

But if it could also be your div container that is cutting it off because there are too many words, with too big of a font size to fit all the text on one line. You either have to make the container bigger for the text to fit or you are going to have to wrap the text.

Upvotes: 1

JanP
JanP

Reputation: 1581

Ionic has a predefined style for that. Use text-wrap on your ion-item (or class item-text-wrap in Ionic 1):

<ion-list>
  <ion-item text-wrap>
    <ion-avatar item-left>
      <img src="img/avatar-small.jpg">
    </ion-avatar>
    <h2>Alissa Connor said something</h2>
    <p>Sed ut perspiciatis unde omnis iste natus error sit Sed ut perspiciatis unde omnis iste natus error sit Sed ut perspiciatis unde omnis iste natus error sit </p>
  </ion-item>
</ion-list>

Upvotes: 3

Yang You
Yang You

Reputation: 2668

just provide some idea for this issue. i didn't test this.

.word-wrap {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

<p class="word-wrap">Sed ut perspicia.....</p>

Upvotes: 1

Related Questions