Angular按钮是否有对应属性可设置插入文本超出容器时自动换行

mat-grid-list 无内置的子元素文本换行配置属性，你可以通过自定义 CSS 覆盖 Angular Material 按钮的默认样式实现多行展示效果，核心修改逻辑如下：

• 覆盖 mat-button 系列组件默认的 white-space: nowrap 规则，允许文本自动换行
• 可搭配文本折断、宽高自适应规则适配 mat-grid-tile 容器尺寸

代码示例 #

HTML 结构

<mat-grid-list cols="3" rowHeight="120px">
  <mat-grid-tile *ngFor="let btn of buttonList">
    <button mat-raised-button class="multi-line-btn">
      {{ btn.content }}
    </button>
  </mat-grid-tile>
</mat-grid-list>

自定义 CSS

.multi-line-btn {
  /* 覆盖Material按钮默认的不换行规则 */
  white-space: normal !important;
  /* 长单词/长字符串自动折断 */
  word-break: break-all;
  /* 按钮高度自适应文本内容 */
  height: auto;
  line-height: 1.3;
  /* 按钮占满网格单元格可用宽度，可按需调整 */
  width: 90%;
  padding: 10px 8px;
}

可选扩展配置 #

如果需要限制按钮最大高度避免超长文本撑破网格，可在上述CSS类中新增以下规则：

max-height: 90%;
overflow: hidden;
/* 超出高度展示省略号，可选 */
text-overflow: ellipsis;

内容的提问来源于stack exchange，提问作者Hacklog24