Вместить текст в блок с максимальным размером шрифта ReactJS

Question

Необходимо вместить текст в div, чтобы он, при этом имел максимальный размер шрифта, зависящий от ширины и высоты блока. Если текста мало - шрифт жирный и большой, текста много - размер меньше и не жирный (чтобы вслез), если текста средне, то тут от размера блока (зависит от размера экрана 90%х90%) зависит. Экран большой - текст жирный, размер вписывается по ширине и высоте, экрна маленький - размер маленький и вес шрифта не жирный. Наличия скролла хотелось бы избежать. Минимальный размер шрифта 15пкс. Можно немного растянуть сам блок по высоте, если текс никак не лезет.

Сам пытался, но именно как подстраивать размер шрифта ещё и под высоту так и не разобрался. Приложение на ReactJs.

Answer 1

Простое решение это, как уже писали в комментариях, сверять clientHeight и scrollHeight

(function() {
    var minSize = 15,
    maxSize = 120,
    textarea = document.querySelectorAll("textarea")[0],
    div = document.querySelectorAll("div")[0];

    textarea.addEventListener('input', function() {
    div.innerText = this.value;
    updateDiv();
  })
  
  function updateDiv() {
    var size = maxSize;
    do {
      div.style.fontSize = size + 'px';
      size--;
    } while ((div.clientWidth < div.scrollWidth || div.clientHeight < div.scrollHeight) && size > minSize);
  }
})();

div {
  background: #eee;
  width: 300px;
  height: 300px;
}

textarea {
  box-sizing: border-box;
  margin-top: 10px;
  width: 300px;
  height: 100px;
  float: right;
}

<textarea placeholder="Fill me..."></textarea>
<div></div>

Answer 2

В виде компонента React:

import { useEffect, useRef } from "react";

export const TextBlock = ({ text }) => {
  const div = useRef(null);

  useEffect(() => {
    const minSize = 1;
    const maxSize = 99;
    let size = maxSize;
    do {
      div.current.style.fontSize = size + "px";
      size = size - 0.1;
    } while (
      (div.current.clientWidth < div.current.scrollWidth ||
        div.current.clientHeight < div.current.scrollHeight) &&
      size > minSize
    );
  }, [text]);

  return <div ref={div}>{text}</div>;
};

Пример на codesandbox - https://codesandbox.io/s/vigorous-driscoll-y7ho3

БЛОГ НА HUSL

Вместить текст в блок с максимальным размером шрифта ReactJS

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