CSS Flex 布局实现文字自动换行：技巧与示例 | Flexbox 文本换行

"CSS Flex 布局实现文字自动换行：技巧与示例 | Flexbox 文本换行"\n在 Flex 布局中，当容器的宽度不足以容纳所有子元素时，子元素默认会被压缩或溢出容器。如果希望子元素在一定长度后自动换行，可以使用以下 CSS 属性：\n\n1. `flex-wrap: wrap;`：设置容器内的子元素可以换行。默认情况下，`flex-wrap` 属性的值为 `nowrap`，表示子元素不换行。\n2. `word-break: break-all;` 或 `overflow-wrap: break-word;`：设置子元素内的文本内容在需要换行时进行换行。这两个属性的效果是一样的，都是在单词内部进行换行。\n3. `min-width: 0;`：设置子元素的最小宽度为 0，以防止子元素被压缩。\n\n以下是一个示例代码：\n\nhtml\n<div class=\"container\">\n <div class=\"item\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>\n <div class=\"item\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>\n <div class=\"item\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>\n <div class=\"item\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>\n</div>\n\n\ncss\n.container {\n display: flex;\n flex-wrap: wrap;\n}\n\n.item {\n flex: 1;\n min-width: 0;\n word-break: break-all;\n /* 或使用 overflow-wrap: break-word; */\n}\n\n\n在上面的示例中，当容器的宽度不足以容纳所有子元素时，子元素会自动换行，并且文本内容会根据需要进行换行。