文本内容走出去卡的角材料2

Question

我使用ngFor显示的笔记列表，它工作正常时，有空间的几个字母，但如果有人加入一长串withought任何空间在其中，卡的文本超出其边界，并创建水平滚动条，直到卡片文本结束。如何让文字内容在到达卡片边框时自动中断？

我* ngFor卡代码看起来像这样

<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

你可以用这个词断CSS属性：

CSS中的字断属性可以用来改变时换行符应该发生。通常，文本中的换行符只能出现在某些空格中，例如有空格或连字符时。

-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; 

所有学分this excellent site.