带字幕的HTML文本

我想创建一个文本（最终是epub/pdf格式，但首先是html格式，然后我会转换），其中每个单词下都有该单词的翻译，只是更小。以下是目标的图片：

我目前的解决方案是将两个单词放在一个div中，每个单词都在它自己的p中，然后我将样式应用到该div中，使其全部对齐，上面的单词比译文大，依此类推。下面是一个单词的样子：

<div class="twc">
    <p class="word-top">Project</p>
    <p class="word-down">Projekt</p>
</div>

项目
项目

---

这个解决方案似乎非常无效。有没有其他方法来归档这个？我不能使用javascript，因为它需要能够转换为epub、pdf、mobi等等。

您的解决方案绝对不错。如果你想依靠自动宽度，你不会做得更好，你会这样做的。我会用另一个

替换

。一个词不能组成一个真正的段落。

你的解决方案绝对不错。如果你想依靠自动宽度，你不会做得更好，你会这样做的。我会用另一个

替换

。一个词不能组成一个真正的段落