使文本完全适合div(高度和宽度)内而不会影响div的大小 [英] Fit text perfectly inside a div (height and width) without affecting the size of the div

问题描述

我提前道歉，因为我知道这个问题以前已经提出很多次了，但是我似乎找不到合适的解决方案(相信我我已经尝试了几次！)

基本上是旧的"在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的整个高度和宽度."

如果我对自己的解释不够好，请附上一张图片，解释我所面临的问题和正在寻找的解决方案.

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

解决方案

答案相同，但使用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

I apologise in advance as I know this question has come up many times before but I just can't seem to find the right solution (and believe me I've tried a few!)

Basically it's the old "Fit text perfectly inside a div without affecting the size of the div". And unless I'm a complete numpty, I believe CSS has no way of doing this. So what I mean basically is rather than doing something like:

#someDiv {
font-size: 12px;
}

or...

#someDiv {
font-size: 1em;
}

...I want to be able to do something like this:

#someDiv {
font-size: fluid;
}

...meaning that whatever text this div contains, scale it to fit perfectly from left to right and top to bottom with no overflow or whitespace.

After trawling through countless websites looking for this CSS solution, I've now accepted that CSS isn't capable of this ...so, enter jQuery.

I've found several jQuery solutions online but they will only scale the text to fit the width, but I want it to scale to the height as well. So effectively I want to say to jQuery:

"jQuery, find $(this) div and whatever text is inside it I want you to scale it so that it fills the entire height and width of the div as tightly as possible".

In case I haven't explained myself very well, I've attached a graphic explaining the problem I'm facing and the solution I'm looking for.

Any help would be much appreciated. Thank you.

解决方案

Here's the same answer, but in 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();
});

By the way...if you ever need to convert coffeescript to javascript, just go to js2coffee.org

这篇关于使文本完全适合div(高度和宽度)内而不会影响div的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！