在艺术上，如果您需要在相同的宽度内放置两行或多行文本，而不管它们的字符数如何，那么您有很好的选择。

最好找到一个动态解决方案，这样无论输入什么文本，我们都会得到一个很好的显示。

让我们看看我们可以如何接近。

var els=document.querySelectorAll（“.divtext”），refWidth=els[0].clientWidth，refFontSize=parseFloat（window.getComputedStyle（els[0]，null）.getPropertyValue（“字号”）；els.forEach（（el，i）=>el.style.fontSize=refFontSize*refWidth/els[i].clientWidth+“px”）#集装箱{显示：内联块；背景色：黑色；衬垫：0.6vw 1.2vw；}.div文本{显示：表格；颜色：白色；字体系列：影响；字体大小：4.5vw；}<div id=“container”><div class=“divtext”>这只是一个</div><div class=“divtext”>示例</div><div class=“divtext”>向您展示</div><div class=“divtext”>您想要</div></div>

我们所做的只是获取第一行的宽度（els[0].clientWidth）和字体大小（parseFloat（window.getComputedStyle（els[0]，null）.getPropertyValue（“字体大小”））作为引用，然后计算后续行的字体大小。

这是一个纯CSS解决方案，您承认断点是必要的，但也希望文本缩放：

我知道我可以添加断点，但我真的希望文本能够缩放还有额外的断点，否则。。。。

以下是一种方法：

自定义财产媒体查询断点clamp（）（2022年2月的浏览器支持率为93%）计算（）

如果可以使用一个通用的缩放因子来控制每个屏幕最大宽度容器内的所有文本缩放，则只需按最大宽度缩放自定义属性，并将此因子应用于1计算。

基本设置如下所示：

:root {
  --scaling-factor: 1
}

.parent {
  font-size: 30px
}

.largest {
  font-size: clamp(60%, calc(var(--scaling-factor) * 100%), 100%); 
}

.middle {
  font-size: clamp(60%, calc(var(--scaling-factor) * 85%), 100%); 
}

.smallest {
  font-size: clamp(60%, calc(var(--scaling-factor) * 70%), 100%); 
}

然后嵌套您的媒体查询，如下所示（或断点所需的任何内容）：

@media (max-width: 1200px) {
  :root {
    --scaling-factor: 0.9
  }
  @media (max-width: 800px) {
    :root {
      --scaling-factor: 0.8
    }
    @media (max-width: 600px) {
      :root {
        --scaling-factor: 0.5 /* nope, because the font-size is floored at 60% thanks to clamp() */
      }
    }
  }
}

这将最小化媒体查询标记。

优势

一个自定义属性控制所有缩放。。。无需为每个媒体断点添加多个声明使用clamp（）设置了字体大小的下限，这样可以确保文本永远不会太小（这里的下限是父字体大小的60%）

请查看此JSFiddle演示。调整窗口大小，直到宽度最小，段落的字体大小都相同。

直接媒体查询似乎是一种更简单、更容易理解的解决方案，可以根据容器大小调整字体大小，而容器大小可能是动态的。

下面将根据容器的大小调整字体大小，无论容器是否缩放到视口的大小，或是否已达到其最大值。如果您有非100%宽的容器，可以相应地调整vw。

.container {
    width: 100%;
    max-width: 600px;
}
.headline {
    font-size: 20vw;
}
.subhead {
    font-size: 5vw;
}
@media (min-width:600px) {
    .headline {
        font-size: 120px;
    }
    .subhead {
        font-size: 32px;
    }
}

纯CSS在某种程度上是可能的。

.自动调整文本大小{content:url（“data:image/svg+xml；utf8，<svg xmlns='http://www.w3.org/2000/svg'version='1.1'height='1.3em'width='10em'><text x='0'y='0.9em'fill='red'>这里是调整大小的文本</text></svg>“）；背景色：rgba（0,0,0,0.06）；动画：成长2s无限交替两者；}@关键帧增长{来自｛width:100px；｝到｛width:300px；｝}<div class=“自动调整文本大小”></div>

解释

内容规则设置元素的内容，它可以是图像的URL，包括SVG图像。SVG图像可以包含文本，因此基本上您有一个带有文本的背景图像，该图像根据其父图像的大小调整大小。您也可以使用background image属性，但与内容不同，它不会影响元素的布局，因此您需要定义父元素的大小。

这种方法的问题是，您需要定义SVG中文本的颜色、大小和位置。他们不会从父母那里继承。但你可以用Sass和Less变得聪明。此解决方案还可能存在可访问性问题。

我不建议在任何地方使用。但它在某些情况下应该相当有用。

这个问题有一个大的哲学。

最简单的方法是给body指定一个特定的字体大小（我建议10），然后所有其他元素的字体都是em或rem。我会给你一个例子来理解这些单位。Em始终相对于其父级：

body{font-size: 10px;}
.menu{font-size: 2em;} /* That means 2*10 pixels  = 20 pixels */
.menu li{font-size: 1.5em;} /* That means 1.5*20 pixels = 30 pixels */

Rem始终相对于身体：

body{font-size: 10px;}
.menu{font-size: 2rem;} /* That means 2*10 pixels = 20 pixels */
.menu li{font-size: 1.5rem;} /* that means 1.5*10 pixels = 15 pixels */

然后，您可以创建一个脚本，该脚本将根据容器宽度修改字体大小。但这不是我要推荐的。例如，在一个900像素宽的容器中，你会有一个字体大小为12像素的p元素。根据你的想法，它将变成一个300像素宽的容器，字体大小为4像素。必须有一个下限。

其他解决方案是媒体查询，这样您就可以为不同的宽度设置字体。

但我推荐的解决方案是使用一个JavaScript库来帮助您实现这一点。还有到目前为止我找到的fitext.js。

但如果容器不是视口（主体）呢？

亚历克斯在2507rkt3的回答下的评论中提出了这个问题。

这一事实并不意味着大众汽车在一定程度上不能用于该集装箱的尺寸。现在要看到任何变化，我们必须假设容器在某种程度上是灵活的。无论是通过直接百分比宽度还是通过100%减去边距。如果容器始终设置为200px宽，那么这一点就变得“无意义”了——然后只需设置一个适用于该宽度的字体大小。

示例1

然而，对于灵活宽度的容器，必须认识到，在某种程度上，容器的大小仍在视口之外。因此，需要根据视口的百分比大小差异调整vw设置，这意味着要考虑父包装的大小。举个例子：

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 2.5vw;
}

假设这里的div是主体的子对象，它是100%宽度的50%，在这个基本情况下是视口大小。基本上，你想设定一个对你来说很好的大众汽车。正如我在上面的CSS内容中的评论中所看到的，你可以从数学上考虑整个视口的大小，但你不需要这样做。文本将随着容器“伸缩”，因为容器会随着视口大小的调整而伸缩。下面是两个不同大小的容器的示例。

示例2

通过强制基于此进行计算，可以帮助确保视口大小。考虑以下示例：

html {width: 100%;} /* Force 'html' to be viewport width */
body {width: 150%; } /* Overflow the body */

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       Here, the body is 150% of viewport, but the container is 50%
       of viewport, so both parents factor  into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 3.75vw
       (5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
    */
    font-size: 3.75vw;
}

大小仍然基于视口外，但本质上是基于容器大小本身设置的。

如果容器的大小动态变化。。。

如果容器元素的大小最终通过@media断点或JavaScript动态改变了其百分比关系，那么无论基础“目标”是什么，都需要重新计算以保持文本大小的相同“关系”。

以上面的示例#1为例。如果div被@media或JavaScript切换为25%宽度，那么同时，字体大小需要在媒体查询或JavaScript中调整为5vw*.25=1.25的新计算值。这将使文本大小与原始50%容器的“宽度”从视口大小减小一半时的大小相同，但现在由于其自身百分比计算的变化而减小。

挑战

使用CSS calc（）函数时，很难动态调整，因为该函数此时不适用于字体大小。因此，如果宽度在calc（）上发生变化，则不能进行纯CSS调整。当然，对页边空白宽度的轻微调整可能不足以保证字体大小的任何改变，因此这可能无关紧要。