jquery - 使文本完美地适合 div(高度和宽度)，而不影响 div 的大小

Question

我提前道歉，因为我知道这个问题以前已经出现过很多次了，但我似乎找不到正确的解决方案(相信我，我已经尝试了一些!)

基本上，它是旧的“使文本完美地适合 div 内而不影响 div 的大小”。除非我是个十足的傻瓜，否则我相信 CSS 没有办法做到这一点。所以我的意思基本上是而不是做类似的事情:

#someDiv {
font-size: 12px;
}

或者...

#someDiv {
font-size: 1em;
}

...我希望能够做这样的事情:

#someDiv {
font-size: fluid;
}

...意味着无论该 div 包含什么文本，都可以将其缩放以从左到右、从上到下完美贴合，没有溢出或空白。

在浏览了无数网站寻找这个 CSS 解决方案之后，我现在已经接受 CSS 无法做到这一点......所以，请使用 jQuery。

我在网上找到了几个 jQuery 解决方案，但它们只会缩放文本以适应宽度，但我希望它也能缩放到高度。我想对 jQuery 说:

“jQuery，找到 $(this) div 以及其中的任何文本，我希望您对其进行缩放，以便它尽可能紧密地填充 div 的整个高度和宽度”。

如果我没有很好地解释自己，我附上了一张图表来解释我面临的问题以及我正在寻找的解决方案。

任何帮助将不胜感激。谢谢。

Answer 1

这是相同的答案，但使用的是 Javascript

var autoSizeText;

autoSizeText = function() {
  var el, elements, _i, _len, _results;
  elements = $('.resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _results = [];
  for (_i = 0, _len = elements.length; _i < _len; _i++) {
    el = elements[_i];
    _results.push((function(el) {
      var resizeText, _results1;
      resizeText = function() {
        var elNewFontSize;
        elNewFontSize = (parseInt($(el).css('font-size').slice(0, -2)) - 1) + 'px';
        return $(el).css('font-size', elNewFontSize);
      };
      _results1 = [];
      while (el.scrollHeight > el.offsetHeight) {
        _results1.push(resizeText());
      }
       return _results1;
    })(el));
  }
  return _results;
};

$(document).ready(function() {
  return autoSizeText();
});

顺便说一句...如果您需要将 CoffeeScript 转换为 JavaScript，只需转到 js2coffee.org