Flex布局下长文本如何自动换行？

Flex 布局下长文本自动换行技巧

在使用 Flex 布局时，如果子元素文本过长，常常会超出容器边界。 为了让长文本自动换行，我们需要用到 CSS 属性 word-break。

通过设置 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; /*  关键属性，强制换行 */
}