word-break: break-word在flexbox中不起作用。

Question

我有一个用flexbox布局的元素.learn--text，需要实现垂直居中，但是使用word-break: break-word属性无效。

目前状态如下：

期望状态如下：

.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;
}

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

- Matt

---

尝试使用overflow-wrap: break-word和overflow: hidden。 - Kameron

如果要将<a>标签保持在一列中，并使文本在下一列中换行，请从learn--text中删除flex-wrap。https://jsfiddle.net/pmtzcv2e/ - G-Cyrillus

@G-Cyrillus 谢谢，但在您的情况下，文本也无法正确换行。我不想将“了解更多有关内容管理”的内容分成两个单独的列。 - Matt

@Kameron 我试过了，但是它没有改变任何东西。 - Matt

Answer 1

删除learn--text中的所有flex设置-它们将其内容分为两个部分，链接和后续文本，将它们视为flex项和单位。如果您删除它，结果如下：

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

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

.learn--text {
    padding: 0 6px;
    white-space: break-spaces;
    word-break: break-word;
}

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

- Johannes

---

但是.learn--text没有垂直居中。 - Matt

我不确定你的意思，但是我刚刚编辑并将 .learn 容器的 align-items 改为 center;，这是否就是你的意思？ - Johannes

Answer 2

这就是答案：

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

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

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

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

- Matt