flexbox布局下需垂直居中的文本设置word-break: break-word失效

我在flexbox子元素.learn--text内有一段需要实现垂直居中的文本，但设置的word-break: break-word规则并未生效。

效果对比 #

• 当前实际效果：
  
• 期望实现效果：
  

相关代码 #

CSS代码 #

.learn {
  display: flex;
  flex: 0 0 50px;
  margin-top: auto;
  align-items: stretch;
  height: 50px;
  border: 1px solid black;
  width: 250px;
}

.learn--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.learn--text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    padding: 0 6px;
    white-space: break-spaces;
    word-break: break-word;
}

HTML代码 #

<div class="learn">
  <div class="learn--icon">icon</div>
  <span class="learn--text">
    <a href="#">Learn more</a> about content management →
  </span>
</div>

问题原因 #

1. word-break: break-word已被W3C标准废弃，兼容性不佳，应该改用overflow-wrap: break-word实现文本换行。
2. .learn--text作为flex容器，设置align-items: center仅能实现单行flex子项垂直居中，多行文本场景下需要改用align-content: center让整组行垂直居中。
3. flex布局的子元素默认min-width: auto，会优先按内容宽度撑开容器，导致换行规则无法触发。

修复后的CSS代码 #

仅需修改.learn--text的样式即可：

.learn--text {
    display: flex;
    flex-wrap: wrap;
    align-content: center; /* 替换align-items，适配多行文本垂直居中 */
    flex: 1;
    padding: 0 6px;
    overflow-wrap: break-word; /* 替换废弃的word-break规则 */
    min-width: 0; /* 允许容器收缩，触发换行 */
}

更简化的替代方案 #

如果不需要flex布局的额外能力，直接用grid布局实现更简洁：

.learn--text {
    flex: 1;
    padding: 0 6px;
    display: grid;
    place-content: center flex-start; /* 垂直水平对齐一步设置 */
    overflow-wrap: break-word;
    min-width: 0;
}

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