How to add a break in email link at the @ if the email is too long

Ionic Framework
1

00%20PM

since the whole email doesn’t fit i would like to add a line break before the @ symbol.

the html looks like this

            <ion-row *ngFor="let email of advisor.emails;">
              <ion-icon class="contactIcons" src="assets/contact_us_icons/envelope_icon.svg"></ion-icon>
              <ion-label class="contactInfo">
                  <a class = "emailParagraph" href="mailto:{{email}}"> {{email}} </a>
              </ion-label>
            </ion-row>

the css looks like

.contactIcons  {
    height: 20px;
    width: 20px;
    padding-right: 8px;
    padding-bottom: 0.9em;
} 

.contactInfo {
    width: 69vw;
    line-height: 1.43em;
}

i’ve tried overflow-wrap, text-overflow, flexwrap and none of those have made any difference

Thanks.