我之前也碰到过这个头疼的问题！你的初始方案其实已经走对了方向，只是在长单词换行、行间距一致性上还有些小瑕疵，我来给你调整一下，完美解决这些问题：

最优解决方案：使用Grid布局（现代浏览器首选） #

这个方案结构清晰，没有hack，兼容性好，能完美满足所有需求：

/* 包裹每个复选框项的容器 */
.checkbox-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem; /* 复选框和文本的间距，可根据需求调整 */
  align-items: start;
  margin: 0.25rem 0; /* 和普通段落保持一致的上下间距 */
}

.checkbox {
  align-self: center; /* 让复选框与首行文本垂直居中 */
  margin: 0; /* 移除默认边距 */
}

.text {
  overflow-wrap: break-word; /* 优先在单词间换行，必要时拆分长单词 */
  line-height: 1.5; /* 和普通段落行高保持一致，消除差异 */
}

/* 普通段落样式（用于对比，可根据你的项目调整） */
p {
  line-height: 1.5;
  margin: 0.25rem 0;
}

对应的HTML结构：

<div class="checkbox-item">
  <label>
    <input type="checkbox" class="checkbox"/>
    <span class="text">Normal checkbox.</span>
  </label>
</div>
<div class="checkbox-item">
  <label>
    <input type="checkbox" class="checkbox"/>
    <span class="text" style="font-size:32px">Normal checkbox but the text is BIG!</span>
  </label>
</div>
<div class="checkbox-item">
  <label>
    <input type="checkbox" class="checkbox"/>
    <span class="text">Normal checkbox, but with a really really long label text that will hopefully cause the text to wrap and show you what happens in this sort of situation.</span>
  </label>
</div>
<div class="checkbox-item">
  <label>
    <input type="checkbox" class="checkbox"/>
    <span class="text">WhenThisTextHasNoSpacesAtAllItGetsPlacedOnANewLineAndIDon'tKnowHowToFixIt-AndIfIAdd"Break-Word"ItCausesOverflowNoMatterWhat</span>
  </label>
</div>

<p>Some really long filler text that will let you see that the line spacing between a normal paragraph and the line spacing between a wrapped checkbox label are subtly different.</p>

方案优势说明 #

1. 完美垂直对齐：通过Grid的align-self: center，复选框会始终和首行文本的垂直中心对齐，不管文本字体大小如何变化；
2. 长文本/长单词处理：overflow-wrap: break-word保证长文本优先在单词间隙换行，只有当单个单词超出容器宽度时才会拆分单词，彻底解决长单词和复选框脱节的问题；
3. 行间距一致：给复选框项和普通段落设置相同的margin和line-height，完全消除原来的行间距差异；
4. 无 accessibility 问题：Grid只是布局方式，不会像table那样被屏幕阅读器误识别为表格结构，label和checkbox的关联也完全正常；
5. 无浏览器兼容风险：所有使用的属性都是标准CSS，在现代浏览器中表现一致，没有依赖line-height这类可能因浏览器默认样式不同而出问题的属性。

兼容老浏览器的回退方案（IE10及以下） #

如果需要支持更老的浏览器，可以使用浮动布局替代Grid，效果完全一致：

.checkbox-item {
  margin: 0.25rem 0;
  overflow: hidden; /* 清除浮动影响 */
}

.checkbox {
  float: left;
  margin-right: 0.5rem;
  margin-top: 0.125em; /* 相对单位微调，让复选框和首行文本垂直居中，自适应字体大小 */
}

.text {
  overflow: hidden; /* 让文本自动填充剩余空间 */
  overflow-wrap: break-word;
  line-height: 1.5;
}

内容来源于stack exchange