Angular Material 2 中的文本内容出卡

Question

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

我的 *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

您可以使用分词 CSS 属性 :

CSS 中的分词符属性可用于更改何时应出现换行符。通常，文本中的换行符只能出现在某些 space 中，例如出现 space 或连字符时。

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

Angular Material 2 中的文本内容出卡

Text content going out of card in Angular Material 2

html

ngfor

angular-material2

angular