是否可以使文字适合最大尺寸，但仍保持一条线？

Question

我有#container，根据屏幕尺寸，它可以非常宽或非常窄。我想要文本（它可以是任何字符串，如字母，单词或某些单词），以扩展到其最大尺寸但保持在一行。是否可以通过纯CSS获得此效果？如果它需要其他东西（比如JavaScript），我该如何实现呢？

更新

虽然容器的宽度随屏幕大小的变化而变化，但它是@media查询定义的固定数字。例如，当屏幕尺寸非常大（例如大于1000px）时，div不会扩展但保持固定宽度。如果我使用vw类型，它仍在扩展，可以分为两行。所以我希望font-size遵循的是div的宽度，而不是屏幕的宽度。如果div扩展/缩小，它会改变。如果div是固定的，无论屏幕有多大，它都会停留。

谢谢，

我已经制作了一张图片来描述我的期望：

Answer 1

您可以将vw单位用于您的目的。我使用了4vw，这意味着 4％的视口宽度。您可以将其更改为舒适的单位。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在JSfiddle

上查看