jquery - 在不影响 div 大小的情况下，将文本完美地放入 div(高度和宽度)

Question

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

基本上它是旧的“在不影响 div 大小的情况下将文本完美地放置在 div 中”。除非我是一个完全 NumPy 的人，否则我相信 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