Ionic-framework: Feature: optional wrapping of text inside list items

[atuttle]

Occasionally it is desirable to have list items with long text labels wrap. For example:

(The text indentation and icon floating to the left are a separate feature of my own, not included here)

To accomplish this I created some custom CSS in my app, but I figure it would be a good feature to add to the framework, considering how generally reusable it could be.

I added this CSS to my app:

.wrapping-list .item-content, .wrapping-list .item {
    overflow: initial;
    white-space: initial;
}

And then declare the list with the wrapping-list class:

<list class="wrapping-list"></list>

If it's something you'd be willing to accept, I could send a pull request with these additions.

[bensperry]

Hey @atuttle, thanks for suggesting this improvement. I'm pretty sure we already have text wrapping inside of elements, although it's not documented very well. You can see an example in the Cards section here: http://ionicframework.com/docs/components/#cards

Is that what you were looking for?

[atuttle]

Indeed, that's it! Thanks. I've added class="item-text-wrap" to my items and it works as expected.

[atuttle]

Although now that I think about it, it would be nice if I didn't have to put that class on each item and could instead (or have the option to do either) put it on the list itself, when I want all items in the list to be able to wrap. For example, I have a list with several other items in it _in addition to_ the items generated by ng-repeat. So I have to add the class to the ng-repeated items, but also each additional item. Seems like unnecessary duplication.

[bensperry]

Cool. @adamdbradley thoughts on that?

[adamdbradley]

Yeah good idea, this will work in the next release, 0.9.24:

<div class="card item-text-wrap">
    <div class="item">
      This is a basic item with some wrapping text.
      This is a basic item with some wrapping text.
    </div>
     <div class="item">
      This is a basic item with some wrapping text.
      This is a basic item with some wrapping text.
    </div>
</div>

[bennlich]

Is there a place for this kind of attribute in the docs? I kind of think of it as a "utility" class.

Also, is there a recommended way to use input-text-wrap with an input-label? The input-label has a width of 30%, so the label wrapping occurs 30% of the way across the input.

[chrisfranko]

sweet it works lol

[VIF-AndrewRutazamba]

Thanks this saved my day and time since the "word-wrap" doesn't work.

[janpio]

+1
Thanks @atuttle

[amirthadharshini]

+1

[FLGGithubDeveloper]

@atuttle will be nice to see your floating left css that works with the card list. :)

[nezzie2k333]

Awesome - That CSS sorted it instantly for me so I +1

[allen8300]

@bensperry @adamdbradley

why item-text-wrap cannot work with ion-radio? it can only work with card?

[MA-Maddin]

now (v2) it is done by utitlity attribute:

text-wrap

example: <ion-item text-wrap>foo</ion-item>

http://ionicframework.com/docs/theming/css-utilities/#text-transformation

[marcovtwout]

text-wrap for labels also changes the font-size and line-height for md:

[text-wrap] .label-md {
  font-size: 1.4rem;
  line-height: 1.5;
}

Alternative solution is to simply put:

ion-label {
  white-space: normal;
}

[arashmad]

thank @atuttle it works for me

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.