拉伸文本以适应 div 的宽度

Question

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

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

原文由 Curtis 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 也能正常工作。

原文由 A F 发布，翻译遵循 CC BY-SA 4.0 许可协议