Как адаптировать размер шрифта к размеру div?

Question

Существует div с фиксированной высотой и шириной. Этот div содержит динамический контент, текстовый контент. Если текст станет слишком длинным, он «взорвется» div. И когда текст станет слишком коротким, div будет выглядеть немного пустым.

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

Никогда не пробовал такого, как этого добиться?

€: поскольку я уже использую dojo в качестве js-фреймворка, включая jquery или любой другой фреймворк, это не вариант. Конечно, еще спасибо за ответы.

Answer 1

Создайте еще один элемент внутри вашего DIV и добавьте текст.

Разделите ширину вашего DIV на элемент, умножьте на 100, и вы получите процентное значение для css font-size.

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

Answer 2

Существует множество плагинов, которые могут подойти для этого.Один из них здесь .

Answer 3

jQuery, вероятно, самый простой вариант здесь. Вы можете использовать функцию css, чтобы изменить размер шрифта поля, если height выше определенного значения? Взгляните на эту скрипку (которую я тестировал в Chrome).

$(function() {
    $('.text').each(function() {
       if($(this).height() > 30)
           $(this).css('font-size', '12px');
    }); 
});

Answer 4

Вы можете сделать это с помощью javascript, используя string.length для получения длины вашей строки, а затем метод jquery .css () для динамического задания размера (http://api.jquery.com/css/). Или если вы можете выполнить некоторые серверные сценарии с установить, что вы можете установить размер с помощью встроенного стиля до загрузки страницы. Здесь используется метод jquery .css

редактировать: После редактирования re dojo вы можете использовать тот же базовый метод, но просто установить размер шрифта, используя методы dojo, а не методы jquery. Этот урок выглядит полезным.

Answer 5

это возможно с JQuery

$(document).ready(function() {
var originalFontSize = 12;
var sectionWidth = $('...').width();
$('...').each(function(){
var spanWidth = $(this).width();
var newFontSize = (sectionWidth/spanWidth) * originalFontSize;
$(this).css({"font-size" : newFontSize, "line-height" : newFontSize/1.2 + "px"});
});
}); 

надеюсь, это помогло! я опубликовал своего рода тот же вопрос, и модератор сказал, что это не по теме:)