Нужно уменьшать шрифт в зависимости от кол-ва символов или под размер поля/дива/области

Question

<div id="id_div">Тут текст должен менять размер в зависимости от кол-ва букв</div>
Сюда мы его вводим: <input type="text" name="tekst" size="43" value="" onKeyUp=" javascript:document.getElementById('id_div').innerHTML = this.value;">

Нигде не нашел реализацию, чтобы в реальном времени вводимый человеком текст в форму, менял свой размер в другом месте. Кажется, что это должно быть не сложно, но я совсем плох в JS, а css с этим не справляется, нашел только изменение шрифта под размер монитора.

Подскажите есть ли простое решение на js, или это настолько сложно что лучше забыть?

Answer 1

В голову приходит только манипуляция с transform: scale:

let block = document.querySelector('.block');
let span = block.getElementsByTagName("SPAN")[0];

document.querySelector(".text").addEventListener('input', update);

function update() {
  span.innerText = this.value;
  calculate();
}

function calculate() {
  let xScale = block.clientWidth / span.clientWidth;
  let yScale = block.clientHeight / span.clientHeight;
  
  span.style.transform = 'translate(-50%, -50%) scale(' + Math.min(xScale, yScale) + ')';
}

body {
  text-align: center;
}

.block {
  margin: 10px auto;
  font-weight: bold;
  font-size: 25px;
  max-width: 400px;
  height: 100px;
  background-color: #ddd;
  position: relative;
}
.block > span {
  display: block;
  white-space: nowrap;
  position: absolute;
  top: 50%;
  line-height: 1;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="block"><span></span></div>

Сюда мы его вводим: <input type="text" class="text" size="43" value="">

Answer 2

Вы не предоставили стили, неизвестно от чего отталкиваться. Модифицировал код по минимуму:

/* Функция пересчёта размера шрифта */
function fGummaFontSize() {
  /* Увеличиваем размер шрифта, до появления прокрутки */
  while (this.scrollHeight <= this.clientHeight || this.scrollWidth <= this.clientWidth) {
    this.style.fontSize = parseFloat(getComputedStyle(this).fontSize) + 2 + "px";
  }
  /* Уменьшаем размер шрифта, пока прокрутка не исчезнет */
  while (this.scrollHeight > this.clientHeight || this.scrollWidth > this.clientWidth) {
    this.style.fontSize = parseFloat(getComputedStyle(this).fontSize) - 1 + "px";
  }
}

/* Функция обхода всех элементов с нужным классом */
function fGummaResizeAll() {
  document.querySelectorAll(".gumma").forEach(el => fGummaFontSize.call(el));
}

window.onload = fGummaResizeAll; // Запуск после загрузки контента
window.onresize = fGummaResizeAll; // Запуск при изменении размеров окна и контейнеров

* { margin: 0; padding: 0; } body { background: url("https://i.stack.imgur.com/m9NKc.png") 0% 0% no-repeat rgb(255, 255, 255); height: 100vh; display: flex; flex-flow: row nowrap; justify-content: space-around; justify-content: space-evenly; align-items: center; }

 /* Большая часть свойств критически важна! */
.gumma {
  font-size: 0px;
  line-height: 1em;
  overflow: hidden;
  overflow-wrap: normal;
  word-wrap: normal;
  word-break: normal;
  line-break: auto;
  -webkit-hyphens: none;
  hyphens: none;
  height: 160px;
  width: 30%;
  background: rgba(240, 240, 240);
}

<div class="gumma" id="id_div">
  Тут текст должен менять размер в зависимости от кол-ва букв
</div>

Сюда мы его вводим: <input type="text" name="tekst" size="43" value="" onKeyUp="document.getElementById('id_div').innerHTML = (this.value||'&nbsp;'); fGummaResizeAll();">

БЛОГ НА HUSL

Нужно уменьшать шрифт в зависимости от кол-ва символов или под размер поля/дива/области

Ответы (2 шт):