在div(高度和宽度)内完美匹配文本而不影响div的大小

Question

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

基本上它是旧的" 在div中完美匹配文本而不影响div的大小 ".除非我是一个完整的numpty,我相信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

Answer 2

我最近想要一些类似的东西:

<div class='container'>
    <div class='no-resize'>This text won't be resized and will go out of the div.</div>
    <div class='resize'>This text will be resized and wont go out of the div.</div>
</div>

和

.no-resize, .resize {
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    color: #000;
    float: left;
    margin-left: 10px;
    font-size: 15px
}

fiddler在jsfiddle.net/mn4rr/1/.

Answer 3

我没有足够的声誉对已接受的答案发表评论,所以我回答了问题.如果height有它的一个CSS3过渡autoSizeText()和$.resizeText上面的回答有问题.我做了一个简短的jquery插件来解决这个问题.

$.fn.resizeText = function (options) {

    var settings = $.extend({ maxfont: 40, minfont: 4 }, options);

    var style = $('<style>').html('.nodelays ' +
    '{ ' +
        '-moz-transition: none !important; ' +
        '-webkit-transition: none !important;' +
        '-o-transition: none !important; ' +
        'transition: none !important;' +
    '}');

    function shrink(el, fontsize, minfontsize)
    {
        if (fontsize < minfontsize) return;

        el.style.fontSize = fontsize + 'px';

        if (el.scrollHeight > el.offsetHeight) shrink(el, fontsize - 1, minfontsize);
    }

    $('head').append(style);

    $(this).each(function(index, el)
    {
        var element = $(el);

        element.addClass('nodelays');

        shrink(el, settings.maxfont, settings.minfont);

        element.removeClass('nodelays');
    });

    style.remove();
}

要使用此插件,您只需要拨打电话

 $(selector).resizeText();

我希望这能节省别人一些时间进行故障排除.我浪费了20分钟的时间,摸不着头脑,想知道为什么上面的代码在我的页面上造成无限循环.