CODEWITHSUNDEEP
javascripttypescriptionic2angular2-template
Spilot
Spilot

Reputation: 1525

How to make text break into new line if it's longer than container

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

Answers (4)

Nirav Tikadiya
Nirav Tikadiya

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

keldar
keldar

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

Duannx
Duannx

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

Pako Navarro
Pako Navarro

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

Related Questions