March 9th, 2017
10:48 am
Posted under Ionic
Permalink
Tags Angular, Tip
An <ion-item> is used (among other things) as the child of an ion-list and has a number of options, detailed here.
A particular issue I hit was that by default text in an item is truncated with an ellipsis on the end, whereas I wanted it to wrap and grow the item height.
Points on this:-
- The item is set to have a min-height and so is capable of expanding down.
- By default, it is set to have white-space:nowrap which prevents wrapping, and text-overflow:ellipsis which gives the ellipsis.
- Wrap can be enabled per the text alignment section in the above ion-item page, using a utility attribute documented here. These attributes are useful as they allow general types of text transformation on a variety of components. In this case, adding the text-wrap attribute to the ion-item allows the text to wrap – it triggers a css attribute selector to set white-space:wrap (a neat use of custom attributes on a custom tag to trigger a css style rule directly).
- Note that the container for the ion-item and its various parent containers are all set to overflow:hidden, but this does not prevent text wrapping when white-space:wrap is in effect as above.
Leave a Reply
You must be logged in to post a comment.