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

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

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

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

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

6
css html javascript xhtml

5 ответов

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

разделите ширину вашего DIV на элемент, умножьте на 100, и у вас есть процентное значение для размера шрифта css.

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

3

существует множество плагинов, которые могут быть доступны для этого. Один из них!--1-->здесь.

3

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

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

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

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

1

это возможно с помощью 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"});
});
});

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

0