Размер шрифта зависит от ширины блока. Как?

@hypnoser · Регистрация: 05.03.2013

Студворк — интернет-сервис помощи студентам

Ребята, не пойму как реализовать такое? Есть блок div с фиксированной шириной, к примеру, 300px. В блоке может выводиться различный текст от 2 до 20 символв. Как сделать, чтобы текст, в зависимости от своей длинны менял размер по ширине блока. Допустим текст "50%" должен быть на всю ширину, но и текст "Акция 50%" тоже должен быть на всю ширину блока, но уже меньшего размера. Может каряво объяснил, но ...

Прошу помощи

@KaRaNTiN · 30.10.2013, 11:52

Могу ошибаться, но вряд ли есть возможность такой реализации.

@hypnoser · 30.10.2013, 11:54 **[ТС]**

Сообщение от KaRaNTiN

Могу ошибаться, но вряд ли есть возможность такой реализации.

Очень жаль. Тогда может кто знает как это реализовать другими способами?

@Padimanskas · 30.10.2013, 19:52

Сообщение от hypnoser

Тогда может кто знает как это реализовать другими способами?

Я знаю. Сначала текст который находится в диве обвязывается инлайн элементом. Далее все очень просто.
Могу написать пример на js если вам все еще необходимо решить эту задачу.

@hypnoser · 30.10.2013, 19:55 **[ТС]**

Сообщение от Padimanskas

Я знаю. Сначала текст который находится в диве обвязывается инлайн элементом. Далее все очень просто.
Могу написать пример на js если вам все еще необходимо решить эту задачу.

Буду очень признателен! Уверен, еще кому-нибудь пригодится на форуме!

@Padimanskas · 31.10.2013, 05:24

В то время, пока я размышлял над реализацией плагина, меня посетила типичная для большинства разработчиков мысль -"неужели из 7 миллиардов людей на всем земном шаре не нашлось человека у которого возникла бы идея масштабирования текста в блоке". Недолго думая, вбиваю в google фразу "dynamically resize text to fill div" и моему взору явился вполне пригодный для использования код, в точности повторяющий идею с span элементом.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Adjust&nbsp;font&nbsp;size</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
body {
  font-size: 16px;  
}
#TextContainer {
  border: 1px solid black;
  width: 200px;
  height: 100px;
}
</style>
</head>
<body>
  <div id="TextContainer"><span>ResizemeResizeme</span></div>
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
(function($) {
    $.fn.textfill = function(options) {
        var fontSize = options.maxFontPixels;
        var ourText = $('span:visible:first', this);
        var maxHeight = $(this).height();
        var maxWidth = $(this).width();
        var textHeight;
        var textWidth;
        do {
            ourText.css('font-size', fontSize);
            textHeight = ourText.height();
            textWidth = ourText.width();
            fontSize = fontSize - 1;
        } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
        return this;
    }
})(jQuery);
 
$(document).ready(function() {
    $('#TextContainer').textfill({ maxFontPixels: 50 });
});

@hypnoser · 31.10.2013, 16:00 **[ТС]**

Одна голова хорошо, а 7 000 000 000 лучше! Padimanskas, огромное спасибо! Признаться на английском задать вопрос я не догадался, да и на русском наверное коряво задавал.

@Web_Master · 31.10.2013, 16:11

А вы в курсе что есть специальные плагины на js для этого дела. И изобретать велосипед заново нет смысла

@Padimanskas · 01.11.2013, 00:48

Сообщение от Web_Master

А вы в курсе что есть специальные плагины на js для этого дела.

Один из оных уже был рассмотрен

@KaRaNTiN · 01.11.2013, 11:44

Сообщение от Web_Master

А вы в курсе что есть специальные плагины на js для этого дела. И изобретать велосипед заново нет смысла

Не по теме:

А Вы в курсе, что порой писать своё гораздо полезнее для развития, чем использовать готовое?

@Web_Master · 01.11.2013, 12:41

Сообщение от KaRaNTiN

А Вы в курсе, что порой писать своё гораздо полезнее для развития, чем использовать готовое?

В курсе, но "изобретать велосипед заново" как-то глупо, когда умные люди уже написали рабочий и удобный код.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@hypnoser 0 / 0 / 0 Регистрация: 05.03.2013 Сообщений: 6

	Размер шрифта зависит от ширины блока. Как? 30.10.2013, 11:24. Показов 31167. Ответов 10 Метки нет (Все метки) Ребята, не пойму как реализовать такое? Есть блок div с фиксированной шириной, к примеру, 300px. В блоке может выводиться различный текст от 2 до 20 символв. Как сделать, чтобы текст, в зависимости от своей длинны менял размер по ширине блока. Допустим текст "50%" должен быть на всю ширину, но и текст "Акция 50%" тоже должен быть на всю ширину блока, но уже меньшего размера. Может каряво объяснил, но ... Прошу помощи 0

@KaRaNTiN 44 / 44 / 11 Регистрация: 10.06.2009 Сообщений: 311 Записей в блоге: 2
	30.10.2013, 11:52
	Могу ошибаться, но вряд ли есть возможность такой реализации. 0

@hypnoser 0 / 0 / 0 Регистрация: 05.03.2013 Сообщений: 6
	31.10.2013, 16:00 [ТС]
	Одна голова хорошо, а 7 000 000 000 лучше! Padimanskas, огромное спасибо! Признаться на английском задать вопрос я не догадался, да и на русском наверное коряво задавал. 0

@Web_Master 112 / 112 / 18 Регистрация: 24.09.2013 Сообщений: 509
	31.10.2013, 16:11
	А вы в курсе что есть специальные плагины на js для этого дела. И изобретать велосипед заново нет смысла 0