HTML页面新增元素无法自动换行的技术求助

你给.word设置了display: flex，flex布局默认的flex-direction是row（水平排列），而且默认不会自动换行，所以.heading和.WordCard这两个子元素会挤在同一行。另外你写的white-space: wrap是无效的，这个属性用来控制文本内容是否换行，对flex容器的子元素布局不起作用。

有两种方式可以解决这个问题，根据你的布局需求选择：

方案一：垂直排列子元素（推荐，适合上下布局场景） #

把flex的方向改成垂直，子元素会自动从上到下排列：

.word {
    color: white;
    position: relative;
    top: 150px;
    display: flex;
    flex-direction: column; /* 设置垂直排列 */
    justify-content: center;
    align-items: center;
    /* 删除无效的white-space: wrap */
}

方案二：允许水平排列时自动换行 #

如果需要保持水平排列，但希望容器宽度不足时子元素换行，可添加flex-wrap: wrap：

.word {
    color: white;
    position: relative;
    top: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* 允许子元素换行 */
    /* 删除无效的white-space: wrap */
}

内容的提问来源于stack exchange，提问作者Singh Jaskeat