2017-08-14 59 views
0

Card content going out of card文本內容走出去卡的角材料2

我使用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> 

回答

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.

+0

問題解決了。非常感謝,不知道這樣的CSS屬性存在! –