Автоматически уменьшать шрифт, если он не помещается в блоке

@skapunker · Регистрация: 13.12.2013

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

Есть ли свойство на CSS, которое будет автоматически уменьшать шрифт, если он не помещается в блоке?

или может скрипт какой рабочий подскажете?

Qwerty_Wasd · 04.11.2017, 22:33

skapunker, чтобы не придумывать очередной велик... вот интересная реализация на Codepen =>ТЫК<=

HTML5
1
2
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper sit amet risus in condimentum. Sed eleifend magna vel leo egestas, vel sagittis mauris vestibulum. Proin vitae metus ac leo pharetra pharetra sed tincidunt elit.</div>
<a href="#">Добавить еще текста</a>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
  background:#123456;
}
div {
  padding:10px;
  width:500px;
  height:400px;
  background:#456789;
  color:white;
  overflow:auto;
  font-size:20px;
}
a {
  color:white;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function scale(block) {
  var step = 0.1,
      minfs = 9,
      scw = block.scrollWidth,
      w = block.offsetWidth;
  if (scw < w) {
    var fontsize = parseInt($(block).css('font-size'), 10) - step;
    if (fontsize >= minfs){
      $(block).css('font-size',fontsize)
      scale(block);
    }
  }
}
// demo
var text = $('div').html();
$('a').click(function(){
  $('div').html($('div').html() + text);
  scale($('div')[0]);
});

Новые блоги и статьи Все статьи Все блоги /
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .

@skapunker -30 / 25 / 12 Регистрация: 13.12.2013 Сообщений: 1,465

	Автоматически уменьшать шрифт, если он не помещается в блоке 04.11.2017, 22:03. Показов 8877. Ответов 1 Метки нет (Все метки) Есть ли свойство на CSS, которое будет автоматически уменьшать шрифт, если он не помещается в блоке? или может скрипт какой рабочий подскажете? 0

Автоматически уменьшать шрифт, если он не помещается в блоке

Решение