侧边栏按钮文本异常：如何固定宽度并实现按钮内文本自动换行？

要实现固定侧边栏宽度且按钮文本自动换行，只需调整侧边栏布局和按钮文本的换行规则，以下是具体修改方案：

1. 调整侧边栏与网格布局CSS #

修改仪表盘CSS，将侧边栏设置为固定宽度，同时优化网格布局避免被内容撑开：

.sidebar{
    grid-area: sidebar;
    width: 280px; /* 设置固定宽度，可根据需求调整 */
    min-width: 200px; /* 可选：限制最小宽度，适配小屏 */
}
.content{
    grid-area: content;
}
.wrapper{
    display: grid;
    grid-template-columns: 280px 1fr; /* 侧边栏固定宽，内容区占剩余空间 */
    grid-gap: 10px;
    grid-template-areas: 
    "sidebar content"
    ;
}

@media (max-width: 700px) {
    .sidebar{
        width: 100%; /* 移动端侧边栏占满宽度 */
    }
    .wrapper {
      grid-template-columns: 1fr;
      grid-template-areas:
        "sidebar"
        "content"
    }
  }

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

2. 允许按钮内文本自动换行 #

由于Angular Material的mat-list-item默认强制文本不换行，需添加CSS覆盖该规则：

/* 全局或组件内添加此样式 */
.mat-list-item {
    white-space: normal; /* 取消强制不换行，允许文本自动换行 */
}

/* 可选：针对长单词换行优化 */
.mat-list-item span {
    word-wrap: break-word;
}

修改后的效果说明 #

• 侧边栏宽度被固定，不会因长文本按钮被撑宽
• 按钮内的长文本会自动换行，不会被隐藏或溢出容器
• 移动端适配保持正常，侧边栏在小屏上占满宽度

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