Text inside the button is either hiding or its extending the button length

Question

If I give a fixed width to the sidebar text inside the button is hiding

This is the Main dashboard HTML code.

<div class="bootstrap-wrapper">
    <div class="container-fluid">
        <div class="wrapper">
            <div class="sidebar">
                <app-sidebar-user></app-sidebar-user>
            </div>
            <div class="content">
                <router-outlet></router-outlet>
            </div>
        </div>
    </div>
</div>

CSS for above dash board....

.sidebar{
    grid-area: sidebar;
}
.content{
    grid-area: content;
}
.wrapper{
    display: grid;
    grid-template-columns: 0.7fr 3fr;
    grid-gap: 10px;
    grid-template-areas: 
    "sidebar content"
    ;
}

@media (max-width: 700px) {
    .wrapper {
      grid-template-columns: 4fr;
      grid-template-areas:
        "sidebar"
        "content"
    }
  }

  @media (max-width: 400px) {
    .sidebar{
        max-width: 370px;
    }
    .content{
        max-width: 370px;
    }
    .wrapper {
      grid-template-columns: 2fr;
      grid-template-areas:
        "sidebar"
        "content"
    }
  }

The HTML code for the side bar component will be placed within the app-sidebar-user> tag, which is located within the dashboard component HTML.

<mat-card style="padding: 10px;">

    <mat-action-list>
     
        <button mat-list-item >
            <mat-icon class="mr10">dashboard</mat-icon>
            <span>Dashboard</span>
        </button>
        <button mat-list-item>
            <mat-icon class="mr10">quiz</mat-icon>
            <span>All quiz</span> 
        </button> 
        <button mat-list-item *ngFor="let c of categories">
            <mat-icon class="mr10">quiz</mat-icon>
            <span>{{c.title}}</span> 
        </button> 
    </mat-action-list>
</mat-card>   

This is the sample Image of side bar

I want to set the length of the side bar here because the red-underlined button in the image increased the width of the entire side bar. I want to add line break inside the buttons.

Answer 1

try to not use span, or make the display to block for the span. by the way your code cannot produce the result as your image because it's not doing query any data, of course because it's on frontend and we don't have your database