html - 是否可以使文本适合最大尺寸但仍保持在一行中？

Question

我有一个#container，它可以根据屏幕尺寸非常宽或非常窄。我希望其中的文本(它可以是任何字符串，如字母、单词或一些单词)扩展到最大尺寸但保持在一行中。是否可以通过纯 CSS 获得这种效果？如果它需要其他东西(如 JavaScript)，我该如何实现？

更新:

虽然容器的宽度会随着屏幕尺寸的变化而变化，但它是@media query 定义的固定数字。例如，当屏幕尺寸很大时，比方说大于 1000px，div 不会扩展，而是保持固定宽度。如果我使用 vw 类型，它仍在扩展并且可以分成两行。所以我希望 font-size 遵循的是 div 的宽度，而不是屏幕的宽度。如果 div 扩展/收缩，它会发生变化。如果 div 是固定的，那么无论屏幕有多大，它都会保持不变。

谢谢，

我制作了一张图片来描述我的期望:

Answer 1

您可以根据自己的目的使用vw 单位。我使用了 4vw，这意味着 4% 的视口(viewport)宽度。您可以将其更改为您舒适的单位。

.text-box {
  font-size: 4vw;
  border: 2px solid gray;
  width: auto;
  height: 100px;
  display: inline;
}

<div id="container">
  <div class="text-box">I am a single line, I expand and contract as well</div>
</div>

在 JSfiddle 上查看