I am currently working on implementing a line of text within an ion-card element, but the challenge lies in the fact that the length of the text varies each time. In order to ensure that the entire text is visible and not cut off, especially on devices with smaller screens such as iOS and Android, I need to determine when the text reaches the end of the card so that it can automatically break into a new line.
Here is a snippet of what the ion-card structure 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 Following the initial suggestion provided, I attempted to implement the overflow wrap feature with CSS to handle longer texts, but it did not achieve the desired outcome. Further assistance is needed in addressing this issue.
#showName{
display: inline;
overflow-wrap: break-word;
font-size: 2rem;
font-weight: 800;
word-spacing: -2px
}