Angular Material 2中的文本内容超出卡片

Question

我正在使用 ngFor 来显示笔记列表，当有几个字母有空格时它可以正常工作，但是如果有人添加了一个没有任何空格的长字符串，卡片的文本会超出其边界并创建一个水平滚动条一直持续到卡片文本结束。如何使文本内容到达卡片边框时自动中断？

我的 *ngFor Card 代码如下所示

<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

您可以使用 word-break CSS 属性：

CSS 中的 word-break 属性可用于更改何时应该发生换行符。通常，文本中的换行符只能出现在某些空格中，例如有空格或连字符时。

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