Как автомасштабировать размер шрифта, чтобы он соответствовал содержимому div?

У меня есть div с некоторым текстом:

<div style="white-space:nowrap;overflow:none;width:50px;">
  With some text in it
</div>

Как я могу масштабировать размер шрифта для текста, чтобы весь текст был видимым?

Ответ 1

В отличие мудр. Вы можете обернуть текст в интерьер DIV, измерить его ширину с помощью JavaScript. Проверьте, является ли эта ширина шире родительского DIV. Получите текущий размер шрифта и постепенно увеличивайте его на 1px за раз, пока внутренняя ширина DIV не будет меньше или равна внешней ширине DIV.

Ответ 2

Я делал что-то вроде этого, чтобы установить шкалу текста относительно ширины/высоты родительского (или окна). Вы можете избежать jQuery, используя offsetWidth и offsetHeight вместо ширины.

var setBodyScale = function () {

    var scaleSource = $(window).width(), // could be any div
        scaleFactor = 0.055,
        maxScale = 500,
        minScale = 75; //Tweak these values to taste

    var fontSize = (scaleSource * scaleFactor) - 8; //Multiply the width of the body by the scaling factor:

    if (fontSize > maxScale) fontSize = maxScale;
    if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums

    $('html').css('font-size', fontSize + '%'); // or em
}

Ответ 3

Пришел к этому плагину JQuery в моем поиске, чтобы найти то же самое.

Github

Demo

Ответ 4

И наткнулся на этот JQuery script, когда я искал то же самое. У этого есть дополнительное преимущество над другими, насколько я могу сказать, что он также настраивается для высоты, а также ширины.

Приходит отсюда: http://www.metaltoad.com/blog/resizing-text-fit-container

 function adjustHeights(elem) {
      var fontstep = 2;
      if ($(elem).height()>$(elem).parent().height() || $(elem).width()>$(elem).parent().width()) {
        $(elem).css('font-size',(($(elem).css('font-size').substr(0,2)-fontstep)) + 'px').css('line-height',(($(elem).css('font-size').substr(0,2))) + 'px');
        adjustHeights(elem);
      }
    }

Ответ 5

Короткий ответ: нет.

Вам нужно будет попробовать размер, отобразить его, посмотреть, подходит ли он, попробовать другой размер, визуализировать его, если он подходит, и т.д. Тогда вам придется обрабатывать случай, когда рассчитанный размер шрифта настолько мал, что никто не может прочитайте текст.

Существуют и другие варианты, если текст не подходит, добавьте эллипсис (...) в конец текста, когда вы нажмете на него, div может расширяться, вы можете использовать всплывающее окно или всплывающую подсказку с полным текстом или поместить полный текст в большую область экрана.

Найдите другой способ.