Flex 布局下如何让子元素文本自动换行？

Flex 布局中实现子元素文本自动换行

使用 Flex 布局时，如果子元素文本过长超出容器宽度，内容可能会被截断。 为了解决这个问题，只需为子元素添加 word-break: break-all; 属性即可。

以下是如何修改代码：

ul {
    display: flex;
    background-color: rgb(90, 162, 230);
    height: 500px;
    width: 500px;
}

li {
    width: 200px;
    height: 200px;
    background-color: pink;
    word-break: break-all; /*  关键属性 */
}

通过添加 word-break: break-all;，文本将在必要时自动断行，即使是在单词中间，确保所有文本内容都能完整显示。