html - 拉伸(stretch)文本以适应 div 的宽度

Question

我有一个固定宽度的 div，但 div 中的文本可以改变。

有没有一种方法可以使用 css 或其他方式设置 字母 之间的间距，以便文本始终完美地填充 div？

Answer 1

这可以通过 text-align:justify 和一个小 hack 来完成。看这里:

div{
  background-color:gold;
  text-align:justify;
}

span{
  background-color:red;
  width:100%;
  height:1em;
  display:inline-block;
}

<div>
  Lorem ipsum sit dolor
  <span> </span>
</div>

技巧是在伪装成真正长单词的文本后添加一个元素。假词实际上是一个 span 元素，带有 display:inline-block 和 width:100%。

在我的例子中，假词是红色的，高度为 1em，但即使没有它，hack 也能正常工作。