在多个 span 元素上 Flex 换行 HTML

Question

对于一个网站，我必须显示一个 div 内部有多个跨度。每个包含一个字符（具有特定颜色 class）。当我使用任何类型的换行时，它们不会将文本识别为整个文本并在空格上换行，而是在单个字符上换行（因为它对计算机来说只有一个输入，正好适合这个地方）

见图：

它应该在 [WRAP] Zoll angegeben 中的“Dieses Maß wird”处换行。

.colouredAnswer {
  display: flex;
  flex-wrap: wrap;
}

.green {
  color: #008000;
  white-space: pre-wrap;
  font-size: 1.5em;
  line-height: 1em;
}

<div class="colouredAnswer">
  <span class="yellow-green">D</span>
  <span class="green">i</span>
  <span class="green">e</span>
  <span class="yellow">s</span>
  <span class="yellow-green">e</span>
  <span class="yellow-green">s</span>
  <span class="green"> </span>
  <span class="green">M</span>
  <span class="green">a</span>
  <span class="green">ß</span>
  <span class="green"> </span>
  <span class="green">w</span>
  <span class="green">i</span>
  <span class="green">r</span>
  <span class="yellow-green">d</span>
  <span class="green"> </span>
  <span class="green">i</span>
  <span class="yellow-green">n</span>
  <span class="green"> </span>
  <span class="green">Z</span>
  <span class="yellow-green">o</span>
  <span class="green">l</span>
  <span class="green">l</span>
  <span class="green"> </span>
  <span class="green">a</span>
  <span class="green">n</span>
  <span class="green">g</span>
  <span class="green">e</span>
  <span class="green">g</span>
  <span class="green">e</span>
  <span class="green">b</span>
  <span class="green">e</span>
  <span class="green">n</span>
  <span class="green">.</span>
</div>

Answer 1

尝试将每个单词包装成 div:

.colouredAnswer {
  display: flex;
  flex-wrap: wrap;
}

.green {
  color: #008000;
  white-space: pre-wrap;
  font-size: 1.5em;
  line-height: 1em;
}

<div class="colouredAnswer">
  <div>
    <span class="yellow-green">D</span>
    <span class="green">i</span>
    <span class="green">e</span>
    <span class="yellow">s</span>
    <span class="yellow-green">e</span>
    <span class="yellow-green">s</span>
  </div>
  <span class="green"> </span>
  <div>
    <span class="green">M</span>
    <span class="green">a</span>
    <span class="green">ß</span>
  </div>
  <span class="green"> </span>
  <div>
    <span class="green">w</span>
    <span class="green">i</span>
    <span class="green">r</span>
    <span class="yellow-green">d</span></div>
  <span class="green"> </span>
  <div>
    <span class="green">i</span>
    <span class="yellow-green">n</span>
  </div>
  <span class="green"> </span>
  <div>
    <span class="green">Z</span>
    <span class="yellow-green">o</span>
    <span class="green">l</span>
    <span class="green">l</span></div>
  <span class="green"> </span>
  <div>
    <span class="green">a</span>
    <span class="green">n</span>
    <span class="green">g</span>
    <span class="green">e</span>
    <span class="green">g</span>
    <span class="green">e</span>
    <span class="green">b</span>
    <span class="green">e</span>
    <span class="green">n</span>
  </div>
  <span class="green">.</span>
</div>

在多个 span 元素上 Flex 换行 HTML

Flex wrap in HTML on multiple span elements

html

word-wrap