如何配置支持word-wrap的label标签的行间距？

可以实现，直接给单个label设置line-height属性即可调整自动换行后的行间距，无需拆分多个标签或者插入换行符。

你需要补充两个部分的样式配置：

1. 给label添加自动换行规则，避免长文本溢出容器
2. 新增line-height属性自定义行间距，同时补充父容器flex布局的对齐规则，保证内容显示正常

完整修改后的代码如下：

CSS部分 #

.blue-div {
  min-height: 70px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: -12%;
  /* transform: translate(-50%, -50%); */
  position: absolute;
  background-color: #003777;
  z-index: 130;
  border-radius: 10px;
  text-align: center;
  display: flex;
  /* 新增：flex布局下让内容垂直水平居中 */
  align-items: center;
  justify-content: center;
  /* 新增：左右内边距，避免文字贴到容器边缘 */
  padding: 0 12px;
}

.labelBluediv {
  /* 文字颜色适配深蓝色背景，可根据需求调整 */
  color: #ffffff;
  /* 自动换行规则，支持长单词/长文本折行 */
  word-wrap: break-word;
  /* 行间距配置：无单位数值为字体大小的倍数，也可写固定像素值如24px */
  line-height: 1.6;
}

HTML部分（无需修改） #

<div class="blue-div">
  <label class="labelBluediv">Voucher Voucher Voucher Voucher Voucher Voucher Voucher Voucher</label>
</div>

补充说明

• line-height取值为无单位数值时，代表行高是当前字体大小的倍数，适配性更强，比如字体大小为14px时，line-height: 1.6对应的实际行高为22.4px，行间距为8.4px
• 如果你需要固定行间距，直接写像素值即可，比如line-height: 24px

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