非CSS解决方案：容器内的文本长度重新调整字体大小

作为参考，非 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 字体，我还使用 CSS 省略号 (“…”) 来截断甚至更长文字也是css 字体，像这样：

#my_container_div {

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

所以，最终：

您还可以探索使用 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;
          }
        }
      }