有没有一种方法可以在不使用css溢出的情况下调整字体大小以适应固定的框？[副本]

Question

<代码>

当字母数量增加并离开该区域时，是否有办法自动减小字体大小而不是css溢出？

Answer 1

我发现这个问题很有趣，所以我将提供一个简单的JavaScript示例，以防它对某人有所帮助。

const div = document.querySelector('div');
const span = document.querySelector('span');


createDynamicTextbox(div, span);


function createDynamicTextbox(outer, inner) {
  if (!outer.style.fontSize) outer.style.fontSize = outer.clientHeight;
  const initialSize = +outer.style.fontSize.match(/\d+/)[0];

  inner.addEventListener('input', function(e) {
    let [n, unit] = outer.style.fontSize.split(/(?<![a-z])(?=[a-z]+)/);
    n=+n;

    while (outer.offsetWidth > inner.offsetWidth) {
      n++;
      outer.style.fontSize = n+unit;
      if (n >= initialSize) return;
    }

    while (inner.offsetWidth > outer.offsetWidth) {
      n--;
      outer.style.fontSize = n+unit;
      if (n <= 0) return;
    }
  });

  inner.dispatchEvent(new InputEvent('input'));
}

css prettyprint-override">div {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
}

<div style="font-size: 30px"><span contenteditable>Edit Me</span></div>