既没有文字也没有省略号

Question

我尝试使用与移动设备和Web视图不同的视图，并且在移动设备上，我决定尝试添加省略号或在按钮图标底部添加文本，无论哪种方式都失败了。我正在使用网格系统，我认为我的解决方案无法正常工作，因为按钮没有增长的空间。但是任何光环都将不胜感激。 https://i.imgur.com/9HTDg3G.png

@media screen and (max-width: 575px) {
  .title {
    margin-top: 0rem;
    padding: 3rem 0 3rem 0;
  }

  .col-3 {
    max-width: 33.3333333333%;
  }

  mat-button-toggle-group {
    padding: 0 15px;
    content: "";
    clear: both;

    mat-button-toggle {

      //float: left;
      button {
        width: 4em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 30px;
        padding: 10px;
        background-color: #f3f3f3;
        border: solid 2px #f3f3f3;
        cursor: pointer;

        &.selected {
          border: solid 2px #f9ae00;
          background-color: #fdeecc;
        }

        mat-icon {
          transition: all 0.2s ease-out;
        }

        &.clicked {
          mat-icon {
            transform: rotate(180deg);
          }
        }

        img {
          width: 2rem;
          max-height: 2rem;
          margin: 0 auto;
          display: block;
        }
      }

      button:focus {
        outline: none;
      }
    }
  }

}

<div class="col-md-12 mb-3">
                                    <div class="row">
                                        <div class="col">
                                            <h5>{{'csa.services-title' | translate}}</h5>
                                        </div>
                                    </div>
                                    <mat-button-toggle-group class="row" name="services">
                                        <mat-button-toggle class="col-3" *ngFor="let service of this.servicesArray">
                                            <button type="button" class="btn btn-lg btn-block"
                                                [class.selected]="service.selected" (click)="toggleService(service)">
                                                <img class="img-fluid" src="{{imgPathServices}}{{service.name}}.png"
                                                    alt="{{service.name}}">
                                                {{service.name | translate}}
                                            </button>
                                        </mat-button-toggle>
                                    </mat-button-toggle-group>
                                </div>