調整字體大小以固定為div

Question

我正在嘗試將文本固定到div中，如果文本增加，則可以正常工作，但是當用戶按退格鍵時，它應該恢復到其大小並適合div

 $(".engravingText").keyup(function() { $('#overlay_image_text').html($('.engravingText').val()); var el = document.querySelector('#overlay_image_text'); var orgFontSize = getStyle(el, 'font-size'); var tst = document.createElement('span'); tst.textContent = el.textContent; tst.style = 'position:absolute;left:-9999px;display:inline-block;'; document.body.appendChild(tst); tst.style.fontSize = orgFontSize; tst.style.fontWeight = getStyle(el, 'font-weight'); tst.style.fontFamily = getStyle(el, 'font-family').split(',')[0]; var i = parseInt(tst.style.fontSize); for (; i > 0; i--) { if (parseInt(getStyle(tst, 'width')) < 200) { el.style.fontSize = i + 'px'; break; } tst.style.fontSize = i + 'px'; } document.body.removeChild(tst); }); function getStyle(elem, prop) { return window.getComputedStyle(elem, null).getPropertyValue(prop); } 

 #overlay_image_text { position: absolute; margin-top: 50px !important; margin-left: 35px !important; text-align: center; width: 200px; font-size: 40px; color: #aeaeae; border: 1px solid red; height: 40px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="overlay_image_text">HHHHH</div> <br /> <input type="text" maxlength="20" style="font-family: Cherokee; background-color: transparent; font-size: 16px; text-align: center;" class="form-control engravingText" placeholder="Please type engraving text here" value=""> 

Answer 1

這是您的固定代碼段。 根據我的評論，orgFontSize不應該在keyup處理程序內。 每次鍵入時都會重置它，並且一旦縮小字體大小就無法增長。

 var el = document.querySelector('#overlay_image_text'); var orgFontSize = getStyle(el, 'font-size'); $(".engravingText").keyup(function() { $('#overlay_image_text').html($('.engravingText').val()); var tst = document.createElement('span'); tst.textContent = el.textContent; tst.style = 'position:absolute;left:-9999px;display:inline-block;'; document.body.appendChild(tst); tst.style.fontSize = orgFontSize; tst.style.fontWeight = getStyle(el, 'font-weight'); tst.style.fontFamily = getStyle(el, 'font-family').split(',')[0]; var i = parseInt(tst.style.fontSize); for (; i > 0; i--) { if (parseInt(getStyle(tst, 'width')) < 200) { el.style.fontSize = i + 'px'; break; } tst.style.fontSize = i + 'px'; } document.body.removeChild(tst); }); function getStyle(elem, prop) { return window.getComputedStyle(elem, null).getPropertyValue(prop); } 

 #overlay_image_text { position: absolute; margin-top: 50px !important; margin-left: 35px !important; text-align: center; width: 200px; font-size: 40px; color: #aeaeae; border: 1px solid red; height: 40px; line-height: 40px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="overlay_image_text">HHHHH</div> <br /> <input type="text" maxlength="20" style="font-family: Cherokee; background-color: transparent; font-size: 16px; text-align: center;" class="form-control engravingText" placeholder="Please type engraving text here" value="">