Масштабирование текста в блоке с помощью Jquery

[DmitrySikorsky]

Когда-то тоже делал что-то подобное. Рекомендую обратить внимание на «новые» единицы измерения в CSS — vw и vh.

Кстати, rem имеют лучшую поддержку в браузерах и мы уже повсеместно используем их в рабочих проектах, добавляя правила с px для совместимости.

[Finesse]

Простите за нескромный вопрос, но зачем здесь jQuery? Указанную функцию можно легко и кроссбраузерно реализовать без jQuery:

function font_size_determination($block,height,width,font_size){
    $block.style.fontSize = fontSize + 'px';
    var block_height = $block.clientHeight;
    var block_width = $block.clientWidth;
    if (block_height > height || block_width > width){
        font_size = font_size*0.9;
        return font_size_determination($block,height,width,font_size);
    } else {
        return font_size;
    }
}

font_size_determination(document.querySelector('.left .frame .frame-content'), 500, 300, 25);

[BlenderRU]

К сожалению, как уже писалось в одной из статей на хабре, многие подгружают jQuery «на автомате», не зависимо от решаемой задачи, даже если от библиотеки используется только селектор и обработчик. Для кого-то это дело вкуса или удобства, а кому-то и лишний трафик с ненужным кодом.

[bay73]

А если вместо константы 0.9 использовать что-то вроде Math.sqrt(height*width/(block_height*block_width)), то количество итераций сократится до парочки.

[Sergey_Peschekhonow]

Спасибо за замечание.

[KlonD90]

https://github.com/halt-hammerzeit/jquery-full-house

[radist2s]

Vanila решение в лоб.

<div class="contain" style="width: 100px; height: 100px">
  <div class="containInner">
    Some text inside
    Some text inside
  </div>
</div>

var increamentRatio = 1.1,
    decreamentRatio = 1 / increamentRatio

function textContaint(containerNode, textContainerNode, ratio) {
  var width = containerNode.clientWidth,
      height = containerNode.clientHeight,
      innerHeight = textContainerNode.clientHeight,
      innerWidth = textContainerNode.clientWidth

  if (width < innerWidth || height < innerHeight) {
    ratio = (ratio && ratio > decreamentRatio) ? false : decreamentRatio
  }
  else if (width > innerWidth || height > innerHeight) {
    ratio = (ratio && ratio < increamentRatio) ? false : increamentRatio
  }
  else {
    return false
  }

  if (!ratio) {
    return false
  }

  var fontSize = parseFloat(getComputedStyle(containerNode).fontSize)
  containerNode.style.fontSize = fontSize * ratio + 'px'

  return ratio
}

var textNode = document.querySelector('.contain'),
    textContainerNode = textNode.querySelector('.containInner'),
    fontSizeRatio

while(fontSizeRatio = textContaint(textNode, textContainerNode, fontSizeRatio)) {}

[Sergey_Peschekhonow]

В принципе здесь тоже можно сделать максимальный и минимальный размер шрифта. К сожалению не знал об этом плагине раньше.

[nexcode]

Рекомендую делать контентно-независимую верстку, чем такое.

[Sergey_Peschekhonow]

При чем здесь контенто-независимая верстка? Здесь говорится о том, чтобы вписать текст в блок со строго определенным размером. Как вписать в блоки одного размера текст с разным количеством символов, при этом, чтобы он был видимым?
Например как здесь https://jsfiddle.net/fqzsevfd/3/?

[extempl]

Кстати, если блок заранее должен быть определённой высоты, то можно в переборе сравнивать scrollHeight и height. Ну и да, ладно бы это был плагин jQuery, тогда заголовок бы себя оправдал. А так — только на Vanilla JS.

[sopov]

http://simplefocus.com/flowtype/