编辑:注意attr()它与css中的calc()有关。将来你也许能做到。

不幸的是，目前没有css唯一的解决方案。这就是我建议你做的。给元素一个title属性。并使用文本溢出省略号来防止设计的破坏，让用户知道有更多的文本在那里。

<div style="width: 200px; height: 1em; text-overflow: ellipsis;" title="Some sample dynamic amount of text here">
 Some sample dynamic amount of text here
</div>

.

.

.

或者，如果您只是想根据视口减小大小。CSS3支持相对于视图端口的新维度。

body {
   font-size: 3.2vw;
}

3.2vw =视口宽度的3.2% 3.2vh =视口高度的3.2% 3.2vmin =小于3.2vw或3.2vh 3.2vmax =大于3.2vw或3.2vh 看到css-tricks.com/..。也可以看看caniuse.com/....

如果从头开始在Bootstrap 4

访问https://bootstrap.build/app 单击搜索模式 搜索$enable- response -font-sizes并打开它。 单击“导出主题”保存自定义引导CSS文件。

我是这样使用smth的:

1 .风格。fontSize = 15.6/(文档。

哪里:1 -父母div Id和2 - Id的div与我的文本

作为参考，一个非css解决方案:

下面是一些JS，根据容器内的文本长度来调整字体大小。

代码依赖于略有修改的代码，但相同的想法如下:

function scaleFontSize(element) {
    var container = document.getElementById(element);

    // Reset font-size to 100% to begin
    container.style.fontSize = "100%";

    // Check if the text is wider than its container,
    // if so then reduce font-size
    if (container.scrollWidth > container.clientWidth) {
        container.style.fontSize = "70%";
    }
}

对于我来说，当用户在下拉菜单中进行选择时，我会调用这个函数，然后填充菜单中的div(这是动态文本出现的地方)。

    scaleFontSize("my_container_div");

此外，我还使用CSS省略号(“…”)来截断甚至更长的文本，如下所示:

#my_container_div {
    width: 200px; /* width required for text-overflow to work */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

所以,最终:

短文:“苹果” 完全渲染，漂亮的大字母。 长文本:“苹果和橘子” 通过上面的JS缩放函数缩小70%。 超长文本:“苹果、橘子和香蕉……” 通过上面的JS缩放函数和CSS规则，缩小70%并用“…”省略号截断。

您还可以尝试使用CSS字母间距来使文本更窄，同时保持相同的字体大小。

正如许多人在@DMTinter的帖子的评论中提到的，OP询问的是字符变化的数量(“数量”)。他还问了关于CSS的问题，但正如@Alexander所指出的，“只有CSS是不可能的”。据我所知，在这个时候这似乎是正确的，所以人们想知道下一个最好的事情似乎也是合乎逻辑的。

我对此并不感到特别自豪，但它确实有效。似乎要写太多的代码来完成它。这就是核心:

function fitText(el){
  var text = el.text();
  var fsize = parseInt(el.css('font-size'));
  var measured = measureText(text, fsize);

  if (measured.width > el.width()){
    console.log('reducing');
    while(true){
      fsize = parseInt(el.css('font-size'));
      var m = measureText(text, fsize );
      if(m.width > el.width()){
        el.css('font-size', --fsize + 'px');
      }
      else{
        break;
      }
    }
  }
  else if (measured.width < el.width()){
    console.log('increasing');
    while(true){
      fsize = parseInt(el.css('font-size'));
      var m = measureText(text, fsize);
      if(m.width < el.width()-4){ // not sure why -4 is needed (often)
        el.css('font-size', ++fsize + 'px');
      }
      else{
        break;
      }
    }
  }
}

这是一个JS Bin: http://jsbin.com/pidavon/edit?html,css,js,console,output 请建议可能的改进(我不是真的对使用画布来测量文本感兴趣…看起来开销太大了(?))。

感谢@Pete的measureText函数: https://stackoverflow.com/a/4032497/442665

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

用这个方程。

对于大于或小于1440和768的任何值，您可以给它一个静态值，或者应用相同的方法。

vw解决方案的缺点是你不能设置缩放比例，比如在屏幕分辨率1440下的5vw最终可能是60px的字体大小，这是你的想法字体大小，但当你将窗口宽度缩小到768时，它可能最终是12px，而不是你想要的最小尺寸。使用这种方法，您可以设置上边界和下边界，字体将在两者之间自行缩放。