为什么我的::after文本互相重叠

Question

我想在文本的每个单词下显示单词的翻译。

我尝试在后块中显示翻译，但当翻译比原始单词长时，它们会重叠。

.word {
    position: relative;
    white-space: pre-line;
    line-height: 60px;
    display: inline;
}
.word::after {
    content: attr(disp);
    position: absolute;
    font-style: italic;
    top: 5px;
    left: 0;
    font-size: 80%;
}

<div>
  <span class="word" disp="tr1">word1 </span>
  <span class="word" disp="tr2">word2 </span>
  <span class="word" disp="translated3">word3 </span>
  <span class="word" disp="translated4">word4
 </span>
  <span class="word" disp="tr5">word5 </span>
  <span class="word" disp="tr6">word6 </span>
</div>

有没有办法定位两个单词（原文+翻译）的每个下一个“块”，使其不与前一个“块”重叠，但“块”之间没有任何边距或使所有“块”相同尺寸？

Answer 1

尝试以下操作：

.word {
    white-space: pre-line;
    line-height: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    float: left;     
}

.word::after {
    content: attr(disp);
    font-style: italic;
    font-size: 80%;
}

<div>
  <span class="word" disp="tr1">word1 </span>
  <span class="word" disp="tr2">word2 </span>
  <span class="word" disp="translated3">word3 </span>
  <span class="word" disp="translated4">word4
 </span>
  <span class="word" disp="tr5">word5 </span>
  <span class="word" disp="tr6">word6 </span>
</div>