Ни текст, ни многоточие не появляются

Question

Я пытаюсь получить представление, отличное от представления для мобильных устройств и Интернета, и на мобильном устройстве я решил попытаться добавить многоточие или текст в нижней части значка моей кнопки, в любом случае не получилось. Я использую систему сетки, и я считаю, что мое решение не работает, потому что нет места для кнопки, чтобы расти. Но любой helo был бы признателен. 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>