contenu du texte sortant de la carte dans Matériel angulaire 2

Question

J'utilise ngFor pour afficher une liste de notes, il fonctionne très bien quand il y a l'espace de quelques lettres, mais si quelqu'un a ajouté une longue chaîne withought un espace dans celui-ci, le texte de la carte dépasse ses limites et crée une barre de défilement horizontale qui va jusqu'à ce que le texte de la carte se termine. Comment faire pour que le contenu du texte se casse automatiquement lorsqu'il a atteint la bordure de la carte?

Mon * ngFor le code carte ressemble à ceci

<div class="col-md-3 eachCard" *ngFor="let note of allNotes"> 
    <md-card> 
     <md-card-content>{{ note.noteText }}</md-card-content> 
      <md-card-actions> 
      <md-icon class="actionIcons" (click)="edit(note)">create</md-icon> 
       <md-icon class="actionIcons" (click)="delete(note)">clear</md-icon> 
      </md-card-actions> 
     </md-card> 
</div> 

Answer 1

Vous pouvez utiliser le mot-break propriété CSS:

La propriété mot-break en CSS peut être utilisé pour changer lorsque les sauts de ligne devrait se produire. Normalement, les sauts de ligne dans le texte ne peuvent se produire que dans certains espaces, comme lorsqu'il y a un espace ou un trait d'union.

-ms-word-break: break-all; 
    word-break: break-all; 

/* Non standard for WebKit */ 
    word-break: break-word; 

-webkit-hyphens: auto; 
-moz-hyphens: auto; 
    hyphens: auto; 

Tous les crédits à this excellent site.