FlexBox 内容溢出（Angular）答案

【问题标题】：FlexBox content overflowing (Angular)FlexBox 内容溢出（Angular）
【发布时间】：2020-03-25 17:42:25
【问题描述】：

在使用 FlexBox (FlexLayoutModule) 时，我偶然发现了一个无法解决的问题。

假设我有某种chat，它由一些显示在彼此下方的消息组成。因此外部容器有flexLayout="column"。

message 由并排显示的名称和文本组成。每个消息应该只抑制 75% 的容器宽度。（没那么重要/如果您将max-width 更改为100%，它只会溢出给定示例中的视口）。

现在，当使用长词时，容器的 max-width 会被忽略，尽管 css 指定了 overflow-wrap: break-word。

注意：实际消息文本的溢出量，匹配名称的宽度 - div，所以当缩短名称时，溢出变得不那么明显了。

我该如何解决这个问题，以便消息文本正确换行并且为messageContainer 指定的max-width 是message 的实际max-width？
随时要求澄清或发布指向其他线程的链接，遗憾的是我无法找到解决方案或正确应用可能的解决方案。

【问题讨论】：

【解决方案1】：

对于您当前尝试换行的内容，还有另一个名为 word-break 的 css 属性。

你可以这样使用它：

.message {
    word-break: break-all;
}

如需更深入地比较word-break 和overflow-wrap，请查看here

【讨论】：