Tengo una entrada de texto y una vista previa de texto div. Quiero que el font size del texto de vista previa se ajuste automáticamente según la height dada. Tenga en cuenta que solo verá la height para ajustar el tamaño de fuente, el width será auto .
Tengo google e investigué mucho, también los he probado pero estas preguntas/respuestas son diferentes a las mías.
Cuando configuro la altura div en 50px , debería ajustar automáticamente el font size de acuerdo con esa altura, la height matters , la altura no debe ser más grande que la dada y cuando el texto pasa a la siguiente línea, entonces debe disminuir el font size para que fit the text a la height .
Aquí está el código:
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>Está funcionando casi bien, pero no está funcionando perfectamente. ¿Puede alguien por favor ayudarme? Estoy atascado...
No estoy seguro de haber entendido bien tu código, pero supongo que la condición en tu bucle for no funciona.
Debe disminuir el tamaño de fuente siempre que la altura del texto sea mayor que su div principal, así:
for(let i; textHeight>previewTextHeight; i++ ){}(Puede editar el texto para verificar el ajuste del tamaño de fuente)
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>