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

Question

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

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>

它几乎正常工作，但工作不完美。有人能帮帮我吗？我被卡住了。。。

Answer 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>