HTML 中 section 内文本未自动换行的解决方案-html教程-PHP中文网

HTML 中 section 内文本未自动换行的解决方案

当使用 display: flex 布局时，默认 flex-direction: row 会使子元素水平排列；若需垂直堆叠（即自然换行效果），必须显式设置 flex-direction: column。

当使用 `display: flex` 布局时，默认 `flex-direction: row` 会使子元素水平排列；若需垂直堆叠（即自然换行效果），必须显式设置 `flex-direction: column`。

在 HTML 中，块级元素（如 <section></section>、<div>、<code><h1></h1>、<p></p>）本应默认独占一行、自上而下流式排列。但一旦父容器设置了 display: flex，其子元素便成为弹性项目（flex items），不再遵循普通文档流规则——此时它们的排列方向由 flex-direction 决定。

你当前的 CSS 中：

.word {
    display: flex;
    /* 缺少 flex-direction，浏览器按默认值 row 处理 */
    justify-content: center;
    align-items: center;
}

这导致 <div class="heading"> 和 <code><section class="WordCard"></section> 被强制并排显示在同一行（即使内容本身是块级元素），视觉上就像“不换行”。

✅ 正确做法是添加 flex-direction: column，让子元素沿主轴（垂直方向）依次排列：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

.word {
    color: white;
    position: relative;
    top: 150px;
    display: flex;
    flex-direction: column;   /* ← 关键修复：启用垂直布局 */
    justify-content: center;
    align-items: center;
    /* 移除 white-space: wrap（该属性对 flex 容器无效，且仅作用于内联元素） */
}

⚠️ 注意事项：

white-space: wrap 在你的原始 CSS 中属于误用：它仅控制容器内文本的换行行为，对 flex 布局的子元素排列无影响，且不应写在 * 或 .word 这类通用/布局容器上；
若后续需为 .heading 和 .WordCard 添加间距，推荐使用 gap 属性（现代、简洁）而非 margin：
```
.word {
    gap: 2rem; /* 在两个 flex 子项间插入统一间距 */
}
```
如需响应式适配，可在小屏幕下保留 column，大屏切换为 row，配合媒体查询即可。

总结：Flex 布局中，“换行”本质是改变主轴方向。牢记 flex-direction: column 是实现垂直堆叠、还原预期文档流表现的核心指令。