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

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

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

Есть ли свойство на 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

body {
  background:#123456;
}
div {
  padding:10px;
  width:500px;
  height:400px;
  background:#456789;
  color:white;
  overflow:auto;
  font-size:20px;
}
a {
  color:white;
}

Javascript

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]);
});

@skapunker 29 / 25 / 12 Регистрация: 13.12.2013 Сообщений: 1,431
		1
	Автоматически уменьшать шрифт, если он не помещается в блоке 04.11.2017, 22:03. Показов 8438. Ответов 1 Метки нет (Все метки) Есть ли свойство на CSS, которое будет автоматически уменьшать шрифт, если он не помещается в блоке? или может скрипт какой рабочий подскажете? 0

	04.11.2017, 22:33

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

Решение