根据元素高度自动设置字体大小

IT技术 javascript css reactjs fonts font-size
2022-07-10 01:13:29

我有一个文本输入和预览文本 div。我希望预览文本font size根据给定的height. 请记住，它只会看到height调整其字体大小，width将auto.
我有谷歌并进行了很多研究，我也尝试过它们，但这些问题/答案与我的不同。
当我将 div 高度设置为 时，它应该根据该高度50px自动调整，高度不应大于给定的高度，当文本转到下一行时，它应该将to递减到. 这是代码：font sizeheight mattersfont sizefit the textheight

const input = document.querySelector('input')
input.addEventListener('input', (e) => {
    const self = e.currentTarget
    const size = parseInt(self.value)
    const textElem = document.querySelector('.previewText')
    textElem.style.height = `${size}px`

    adjustText(size, textElem)
})

const adjustText = (size, textElem) => {
    const childElem = textElem.firstChild.nextElementSibling
    let fontSize = textElem.style.fontSize
    fontSize = fontSize.replace('px', '')
    for (let i = 0; i < size; i++) {
        if (textElem.offsetHeight > childElem.offsetHeight) {
            console.log('greater tha')
            textElem.style.fontSize = `${i}px`
        }
        if (textElem.offsetHeight < childElem.offsetHeight) {
            console.log('less than')
            textElem.style.fontSize = `${fontSize - 1}px`
        }
    }
}
<input type="number">
<div class="previewText">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</div>
</div>

它几乎可以正常工作，但不能完美运行。有人可以帮帮我吗？我被困住了...

1个回答

不确定我的代码是否正确，但我猜你的 for 循环中的条件不起作用。

只要文本高度大于它的父 div，您就需要减小字体大小，如下所示：

    for(let i; textHeight>previewTextHeight; i++ ){}

示例片段

（您可以编辑文本以检查字体大小调整）

const fontSize = document.querySelector('#fontSize');
const previewText = document.querySelector('.previewText');
const textInner = document.querySelector('.textInner');
const currentFontSize = document.querySelector('.currentFontSize');

const adjustText = function() {
  let size = fontSize.value;
  previewText.style.fontSize = `${size*1}px`;
  previewText.style.height = `${size}px`;
  let previewTextHeight = previewText.clientHeight;
  let textHeight = Math.ceil(textInner.clientHeight);

  for (let i; textHeight > previewTextHeight; i++) {
    size -= 1;
    previewText.style.fontSize = `${size*1}px`;
    textHeight = Math.ceil(textInner.clientHeight);
  }
  currentFontSize.textContent = `fontSize: ${size} height: ${previewTextHeight}`;
}

//
adjustText();

fontSize.addEventListener('change', (e) => {
  adjustText()
})


textInner.addEventListener("input", (e) => {
  adjustText()
});
.previewText {
  outline: 1px solid #ccc;
  line-height: 1.2em;
  font-family: Arial;
}

.textInner:focus {
  outline: none
}
<p>Font-size</p>
<input id="fontSize" type="range" value="200" step="10" min="10" max="200">
<p>Editable text</p>
<div class="previewText">
  <div class="textInner" contentEditable>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</div>
</div>
<p class="currentFontSize"></p>

其它你可能感兴趣的问题
上一篇Nextjs：侧边栏路由 下一篇导航栏在单击时同时打开所有菜单