文本内容走出去卡的角材料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>
答
你可以用这个词断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;
问题解决了。非常感谢,不知道这样的CSS属性存在! –