Html 溢出换行未应用于文本 问题

我目前有一个侧菜单，我用Angular创建的，它在我的屏幕上运行得很好（4k分辨率）。问题是在较小的屏幕上，菜单中的文本没有包装，因此溢出容器div。我尝试应用

overflow wrap:break word添加到文本，但这不起作用

如蒙协助，将不胜感激

您可以看到以下问题：



代码
组件的HTML:

<div class="sidebar animated fadeIn">
  <div class="header">
    <div style="display:block;margin-left:auto;margin-right:auto;width:100%;">
      <img src="../../../assets/images/logo.svg" style="width:100%" />
    </div>
  </div>
  <div class="spacer"></div>
  <div class="menu-item" *ngFor="let item of items" (click)="goTo(item.path)">
    <i class="material-icons">{{item.icon}}</i>
    <h3 class="text">{{item.name}}</h3>
  </div>
</div>

.sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 10%;
  background: rgba(191, 158, 69, 1);
  background: -moz-linear-gradient(top, rgba(191, 158, 69, 1) 0%, rgba(250, 239, 210, 1) 100%);
  background: -webkit-gradient(
    left top,
    left bottom,
    color-stop(0%, rgba(191, 158, 69, 1)),
    color-stop(100%, rgba(250, 239, 210, 1))
  );
  background: -webkit-linear-gradient(bottom, rgba(191, 158, 69, 1) 0%, rgba(250, 239, 210, 1) 100%);
  background: -o-linear-gradient(bottom, rgba(191, 158, 69, 1) 0%, rgba(250, 239, 210, 1) 100%);
  background: -ms-linear-gradient(bottom, rgba(191, 158, 69, 1) 0%, rgba(250, 239, 210, 1) 100%);
  background: linear-gradient(to top, rgba(191, 158, 69, 1) 0%, rgba(250, 239, 210, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf9e45', endColorstr='#faefd2', GradientType=0 );
  box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5);
}

.header {
  width: 100%;
}

.spacer {
  margin-top: 3em;
}

.menu-item {
  border-top: 1px solid darkgray;
  padding-left: 2em;
  height: 3em;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.menu-item .text {
  margin-left: auto;
  margin-right: auto;
  overflow-wrap: break-word;
}

添加此属性
wordbreak:breakall

.menu-item .text {
  margin-left: auto;
  margin-right: auto;
  /*overflow-wrap: break-word;*/
  word-break: break-all;
}

添加此属性
wordbreak:breakall

.menu-item .text {
  margin-left: auto;
  margin-right: auto;
  /*overflow-wrap: break-word;*/
  word-break: break-all;
}