Reputation: 1525
I have a line of text on an ion-card that will have a varying length every time. I need to be able to tell when the text has reached the end of the card (on both ios and android - which can have an even smaller screen) so I can break it into a new line.
this is what the card looks like:
<ion-card>
<ion-item>
<p><i>On:</i><span id="showName">{{event.showName}}</span></p>
<p><i>At:</i><span id="venueName">{{event.venue}}</span></p>
</ion-item>
<ion-card>
UPDATE I tried the first answer suggestion and added the break-word overflow wrap to css but it didn't work. I still need hel.
#showName{
display: inline;
overflow-wrap: break-word;
font-size: 2rem;
font-weight: 800;
word-spacing: -2px
}
Upvotes: 1
Views: 1656
Reputation: 24
<ion-grid>
<ion-row>
<ion-col col-12>
<ion-item>
<p><i>On:</i><span id="showName">{{event.showName}}</span></p>
<p><i>At:</i><span id="venueName">{{event.venue}}</span></p>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
inside "ion-card" tag, put this code and try to run. It will restrict your text to that particular area only.
Upvotes: 1
Reputation: 6252
Ionic have a CSS utility text-wrap
: https://ionicframework.com/docs/theming/css-utilities/
Thus:
<ion-card>
<ion-item>
<p text-wrap><i>On:</i><span id="showName">{{event.showName}}</span></p>
<p text-wrap><i>At:</i><span id="venueName">{{event.venue}}</span></p>
</ion-item>
<ion-card>
Upvotes: 0
Reputation: 8746
Your content will be automatically wrapped into an ion-label
. This element have default css is: white-space: nowrap
. You need to overide it:
.label{
white-space: normal !important;
}
Upvotes: 1
Reputation: 168
Maybe you should use css, for display purpouses:
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
overflow-wrap: break-word;
Upvotes: 1