flex 布局中实现文本自动换行

在使用 Flex 布局时，如果子元素内容过长导致超出父元素宽度，默认情况下文本会被截断。为了让文本自动换行，需要设置 word-break 属性。

以下示例演示如何使用 word-break 属性使 Flex 布局中的文本自动换行：

<code class="css">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; /* 强制换行 */
}</code>

word-break: break-all; 属性会强制浏览器在任何字符处断行，确保文本不会超出容器宽度。 这是一种简单有效的解决方法，适用于需要强制换行的场景。