我的问题类似，但与标题内的文本缩放有关。我尝试了Fit Font，但我需要切换压缩器以获得任何结果，因为它解决了一个稍微不同的问题，就像文本流一样。

所以我写了我自己的小插件，它减小了字体大小以适应容器，假设你有溢出：隐藏和空白：nowrap，这样即使将字体减小到最小也不允许显示完整的标题，它也会切断它可以显示的内容。

(function($) {

  // Reduces the size of text in the element to fit the parent.
  $.fn.reduceTextSize = function(options) {
    options = $.extend({
      minFontSize: 10
    }, options);

    function checkWidth(em) {
      var $em = $(em);
      var oldPosition = $em.css('position');
      $em.css('position', 'absolute');
      var width = $em.width();
      $em.css('position', oldPosition);
      return width;
    }

    return this.each(function(){
      var $this = $(this);
      var $parent = $this.parent();
      var prevFontSize;
      while (checkWidth($this) > $parent.width()) {
        var currentFontSize = parseInt($this.css('font-size').replace('px', ''));
        // Stop looping if min font size reached, or font size did not change last iteration.
        if (isNaN(currentFontSize) || currentFontSize <= options.minFontSize ||
            prevFontSize && prevFontSize == currentFontSize) {
          break;
        }
        prevFontSize = currentFontSize;
        $this.css('font-size', (currentFontSize - 1) + 'px');
      }
    });
  };
})(jQuery);

我看不到任何关于CSS flex属性的答案，但它也非常有用。

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

最简单的方法是给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。

在CSS内部，尝试在底部添加此项，更改320像素的宽度，以适应设计开始中断的位置：

@media only screen and (max-width: 320px) {
  body { font-size: 1em; }
}

然后根据需要以“px”或“em”表示字体大小。

如果这对任何人都有帮助的话，本线程中的大多数解决方案都是将文本包装成多行，形式为e。

但后来我发现了这一点，它奏效了：

https://github.com/chunksnbits/jquery-quickfit

示例用法：

$（'.someText'）.quickfit（｛max:50，公差：.4｝）

我自己的解决方案，基于jQuery，通过逐渐增加字体大小来工作，直到容器的高度大大增加（这意味着它有换行符）。

它很简单，但工作得很好，而且非常容易使用。您不必了解所使用的字体，一切都由浏览器处理。

你可以在上面玩http://jsfiddle.net/tubededentifrice/u5y15d0L/2/

神奇就发生在这里：

var setMaxTextSize=function(jElement) {
    // Get and set the font size into data for reuse upon resize
    var fontSize=parseInt(jElement.data(quickFitFontSizeData)) || parseInt(jElement.css("font-size"));
    jElement.data(quickFitFontSizeData, fontSize);

    // Gradually increase font size until the element gets a big increase in height (i.e. line break)
    var i = 0;
    var previousHeight;
    do
    {
        previousHeight=jElement.height();
        jElement.css("font-size", "" + (++fontSize) + "px");
    }
    while(i++ < 300 && jElement.height()-previousHeight < fontSize/2)

    // Finally, go back before the increase in height and set the element as resized by adding quickFitSetClass
    fontSize -= 1;
    jElement.addClass(quickFitSetClass).css("font-size", "" + fontSize + "px");

    return fontSize;
};