Flex布局换行异常：如何实现长名称时年龄模块换行至其下方

我有一个简单的Flex布局，HTML代码如下：

<div className="details">
   <div className="name">Name: {name}</div>
        <span className="bullet"></span>
   <div className="age">Age: {age}</div>
        <span className="bullet"></span>
</div>

当name内容过长时，布局出现异常换行，所有元素错乱拆分，而非预期的项目符号+年龄模块整体换行至名称下方。当前CSS代码如下：

.details {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}

.name, .age {
     color: #575757;
     word-wrap: break-word;
}

.bullet {
     background-color: #575757;
     width: 2px;
     height: 2px;
     margin: auto 4px;
     border-radius: 100%;
}

请问如何通过CSS实现：当名称过长时，项目符号和年龄模块换行至名称下方，避免当前的异常换行？

要实现项目符号+年龄整体换行的效果，有两种可行方案：

方案一：调整HTML结构（推荐） #

把「项目符号+年龄模块」包裹在一个容器内，让它们成为独立的Flex项，避免被拆分：

<div className="details">
   <div className="name">Name: {name}</div>
   <div className="age-group">
        <span className="bullet"></span>
        <div className="age">Age: {age}</div>
   </div>
   <!-- 其他模块同理，用容器包裹符号和对应内容 -->
</div>

对应的CSS修改：

.details {
    display: flex;
    flex-wrap: wrap; /* 允许Flex项换行 */
    align-items: center; /* 垂直居中所有项 */
    gap: 8px; /* 控制Flex项之间的间距，替代margin更直观 */
}

.name, .age {
     color: #575757;
     word-wrap: break-word;
}

.age-group {
    display: flex;
    align-items: center; /* 让符号和年龄文本垂直居中 */
    gap: 4px; /* 符号与年龄之间的间距 */
}

.bullet {
     background-color: #575757;
     width: 2px;
     height: 2px;
     border-radius: 100%;
     /* 移除原margin，改用gap控制间距 */
}

方案二：仅修改CSS（无需调整HTML） #

通过white-space: nowrap强制让项目符号和年龄文本不被拆分，结合父容器的换行规则实现效果：

.details {
    display: flex;
    flex-wrap: wrap; /* 开启换行 */
    align-items: center; /* 垂直居中对齐 */
}

.name {
    color: #575757;
    word-wrap: break-word;
}

.age, .bullet {
     color: #575757;
     white-space: nowrap; /* 禁止年龄和符号换行拆分 */
}

.bullet {
     background-color: #575757;
     width: 2px;
     height: 2px;
     margin: auto 4px;
     border-radius: 100%;
}

核心原理 #

• 方案一通过容器将相关元素整合为一个Flex项，空间不足时整个容器一起换行，逻辑清晰且易于维护。
• 方案二通过white-space: nowrap阻止单个元素内部换行，确保符号和年龄始终处于同一行，配合父容器的flex-wrap: wrap实现整体换行。

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