css - 如何在特定级别上进行空格换行？

Question

我有这样的结构：

<p>
  <span class="unit">
    <span>Label</span>
    <span>Value</span>
  </span>
  <span class="unit">
    <span>Label</span>
    <span>Value</span>
  </span>
  <span class="unit">
    <span>Label</span>
    <span>Value</span>
  </span>
</p>

如果空间不足以使 p 显示在一行中，我想换行。但是，只能将整个单元包装为一个块。我不希望标签和值被拆分。

我试过了：

p > span {
  white-space: nowrap;
}

但这不起作用：

p {
  width: 200px;
}

p>span>span {
  white-space: nowrap;
}

<p>
  <span class="unit">
    <span>Label</span>
    <span>Value</span>
  </span>
  <span class="unit">
    <span>Label</span>
    <span>Value</span>
  </span>
  <span class="unit">
    <span>Label</span>
    <span>Value</span>
  </span>
  <span class="unit">
    <span>Label</span>
    <span>Value</span>
  </span>
</p>

标签： css

Answer 1

您需要设置white-space: nowrap在unit课堂上，而不是在sub-span.

p {
  width: 200px;
  word-break: break-word;
}

.unit {
    white-space: nowrap;
}

<p>
  <span class="unit">
    <span>Label</span>
    <span>Value</span>
  </span>
  <span class="unit">
    <span>Label</span>
    <span>Value</span>
  </span>
  <span class="unit">
    <span>Label</span>
    <span>Value</span>
  </span>
</p>