如何让带标签的内联字段支持自动换行？HTML/CSS布局问题

要实现标签位于字段文本下方的政务表单布局，同时让字段文本自动换行而非整个组件被挤到下一行，你需要调整inline-flex容器的收缩规则，并给文本元素设置换行属性，具体实现如下：

核心代码实现 #

HTML结构 #

<div class="gov-form">
  <!-- 普通文本字段 -->
  <div class="labeled-field">
    <span class="field-content">这是一段需要自动换行的超长字段内容，测试文本测试文本测试文本测试文本测试文本</span>
    <label class="field-label">用户姓名</label>
  </div>
  
  <!-- 单行输入框 -->
  <div class="labeled-field">
    <input type="text" class="field-input" value="这是一段超长的输入内容，会自动换行或滚动显示" />
    <label class="field-label">联系电话</label>
  </div>
  
  <!-- 多行文本框 -->
  <div class="labeled-field">
    <textarea class="field-textarea" placeholder="请输入详细地址，内容过长会自动换行"></textarea>
    <label class="field-label">家庭住址</label>
  </div>
</div>

CSS样式 #

/* 表单容器：模拟政务表单的有限宽度 */
.gov-form {
  width: 600px;
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
}

/* 核心字段组件：inline-flex实现inline排列，垂直布局 */
.labeled-field {
  display: inline-flex;
  flex-direction: column; /* 先渲染字段内容，再渲染标签，实现标签在下方 */
  align-items: flex-start; /* 内容左对齐，符合政务表单习惯 */
  margin: 0 1rem 0.8rem 0;
  min-width: 0; /* 关键属性：允许flex容器收缩，避免内容撑开导致整个组件换行 */
}

/* 普通文本内容：强制自动换行 */
.field-content {
  overflow-wrap: break-word; /* 兼容现代浏览器，替代旧的word-wrap */
  max-width: 180px; /* 可选：限制字段最大宽度，确保换行触发 */
  line-height: 1.4;
}

/* 单行输入框：占满容器宽度，支持文本滚动/换行 */
.field-input {
  width: 180px;
  padding: 0.4rem 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 多行文本框：自动换行 */
.field-textarea {
  width: 180px;
  height: 70px;
  padding: 0.4rem 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical; /* 允许用户调整高度 */
  overflow-wrap: break-word;
}

/* 标签样式：政务表单风格 */
.field-label {
  font-size: 0.85rem;
  color: #555;
  margin-top: 0.3rem;
}

关键属性说明 #

• min-width: 0：默认情况下，flex容器的min-width为auto，会自动撑开以适应内部内容的最小宽度，导致空间不足时整个组件直接换行。设置为0后，容器可以收缩到小于内容宽度，从而触发内部文本的换行逻辑。
• overflow-wrap: break-word：强制长单词或连续无空格文本在容器边界处换行，避免文本溢出。
• inline-flex：保持组件的inline特性，让多个字段可以在同一行排列，同时利用flex的垂直布局能力实现标签在字段下方的效果。

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