如何用CSS实现右侧内容在左侧内容末尾处换行的动态布局？

你当前使用Bootstrap栅格的col-md-6将内容拆分为两列，会强制右侧内容从下一列开头显示，无法达成“右侧数据在左侧数据结束位置换行”的设计效果。通过调整HTML结构和CSS可以动态实现需求：

修改后的HTML结构 #

<div class="item-row">
  <p class="key text-capitalize">Decision [Is Equal To] :</p>
  <p class="value text-capitalize">On Hold Temporarily</p>
</div>

核心CSS样式 #

.item-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.key {
  margin: 0;
  white-space: nowrap; /* 确保左侧文本不被拆分换行 */
  margin-right: 8px; /* 与右侧内容保持间距 */
}

.value {
  margin: 0;
  flex: 1; /* 让右侧内容占据剩余空间，超出自动换行 */
}

/* 若已引入Bootstrap可忽略此段，text-capitalize为原有样式 */
.text-capitalize {
  text-transform: capitalize;
}

实现原理 #

• 用flex布局替代固定宽度的栅格列，让左右内容在同一行流中排列
• white-space: nowrap保证左侧关键文本始终保持完整一行，不会被拆分
• flex: 1让右侧内容自动填充剩余可用空间，当内容长度超出容器宽度时，会从左侧文本的结束位置开始换行，而非跳到下一列开头

替代方案（inline-block实现） #

如果不想使用flex布局，也可以用inline-block实现（需预估左侧文本宽度，灵活性稍差）：

.item-row {
  width: 100%;
}

.key, .value {
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

.key {
  white-space: nowrap;
  margin-right: 8px;
}

.value {
  width: calc(100% - 180px); /* 180px为预估的左侧key文本宽度，可根据实际调整 */
}

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