CSS：完全适合 div 容器的字母间距百分比

Question

我需要将文本完全放入 100% 宽度的 div 容器中。

我尝试使用 letter-spacing 但它看起来只接受 px/em，而不接受百分比值.. 但不会响应（例如调整窗口大小）。

这就是我得到的：http: //jsfiddle.net/3N6Ld/

我应该采取另一种方法吗？有任何想法吗？谢谢

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

Answer 1

如果你知道你有多少字母，你可以使用 vw （视口宽度）单位来实现。

在下面的示例中，我使用了 14.29vw 的值，因为 100（窗口宽度的 100%）除以 7（单词“CONTENT”中的字母数）大约为 14.29。

 html, body {
  margin: 0;
  height: 100%;
  width: 100%;
}
.container{
  background: tomato;
  height: 10%;
  width: 100%;
}

.content {
  color: white;
  letter-spacing: 14.29vw;
  overflow: hidden;
}

 <div class="container">
  <div class="content">
    CONTENT
  </div>
</div>

如果你想让“T”更靠近右边缘，你可以增加一点 letter-spacing 。对于 Stack Overflow 的代码片段，将其设置为 14.67vw 就可以了：

 html, body {
  margin: 0;
  height: 100%;
  width: 100%;
}
.container{
  background: tomato;
  height: 10%;
  width: 100%;
}

.content {
  color: white;
  letter-spacing: 14.67vw;
  overflow: hidden;
}

 <div class="container">
  <div class="content">
    CONTENT
  </div>
</div>

原文由 James Donnelly 发布，翻译遵循 CC BY-SA 3.0 许可协议