根据元素高度自动设置字体大小。
根据元素高度自动设置字体大小。
提问于 2022-07-21 10:27:41
我有一个文本输入和预览文本div。我希望预览文本font size自动调整根据给定的height。请记住，它只会看到height来调整其字体大小，width将是auto。
我有谷歌和很多研究，我也尝试过，但这些问题/答案与我的不同。
当我将div高度设置为50px时，它应该根据这个高度自动调整font size，height matters，高度不应该大于给定的高度&当文本转到下一行时，它应该将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>
它几乎是正确的，但它的工作并不完美。有人能帮帮我吗？我卡住了..。
回答 1
Stack Overflow用户
发布于 2022-07-21 19:27:42
我不确定您的代码是否正确，但我想您的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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73064565
复制相关文章
相似问题
腾讯云开发者
