縮放div內容以適合固定大小

Question

我的頁面上有兩個具有以下樣式的div。

 #currentExpr { visibility: hidden; height: 1px; width: 1px; } #currentExprFront { height: 3.5cm; font-size: 500%; } 

 <div id="currentExpr">\\( \\)</div> <div id="currentExprFront"></div> 

如您所見，第一個隱藏。 在其上執行一些動態過程（JavaScript，調用外部服務器等），直到獲得並更新div內容（一個長的數學ml表達式）為止。在此隱藏的div上完成此操作可以跳過很多動作，快速更改，直到獲得最終內容。

獲得最終內容后，使用JavaScript語句將currentExpr內容復制到可見的div currentExprFront ：

currentExprFront.innerHTML = currentExpr.innerHTML;

問題：我需要縮放content / div currentExprFront以適合預期的大小（ 3.5cm ）。 有時，內容大於此最大值。 例如，一種可能是調整字體大小百分比。

有什么提示嗎？ 非常感謝。

Answer 1

這是我嘗試在注釋中解釋的演示-JavaScript可以非常快速地移動，以至於用戶的眼睛看不到變化（或者瀏覽器可能不願意完全渲染）。 因此，利用這種速度優勢...

• 將內容包裝到容器中（在本例中為span ）。
• 使用您要輸出的內容填充目標div 。
• 測量span的高度與div的高度
• 根據內容是太大還是太小來增加字體大小。

 const target = document.getElementById('target'); const longText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare orci non tristique facilisis. Sed erat eros, dapibus sed arcu lobortis, consequat mollis odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam efficitur metus enim, placerat varius felis fringilla vitae. Sed consectetur massa nec nulla ullamcorper tincidunt. Morbi eu orci hendrerit, egestas mi ac, consequat odio. Aenean id erat vitae sem mollis convallis quis in quam. Donec varius tempus ligula, in vulputate nisl pretium vel. Nullam ac arcu finibus, aliquam erat quis, lacinia metus. Aenean convallis magna et lectus mollis, eget scelerisque turpis dapibus. Donec sit amet erat mi. Sed tempus, tortor vel vehicula feugiat, elit purus fringilla tellus, eget molestie ex libero interdum mauris. Nam vehicula a justo et viverra. Aenean eget fringilla erat, id blandit sapien.'; const longTextBtn = document.getElementById('longText'); longTextBtn.addEventListener('click', ()=>{ addText( longText ); } ); const shortText = 'Lorem ipsum dolor.'; const shortTextBtn = document.getElementById('shortText'); shortTextBtn.addEventListener('click', ()=>{ addText( shortText ); } ); // addText() :: Responsible for creating the span element and // assigning the text to the target div/container function addText( phrase ){ target.innerHTML = ''; let targetSpan = document.createElement('span'); targetSpan.id = 'tempID'; let data = document.createTextNode( phrase ); targetSpan.appendChild( data ); target.appendChild( targetSpan ); resizeText( targetSpan, target ); } // resizeText() :: A recurssive function that will measure the size // of the content vs. the size of the container and // adjust the font-size accordingly. // Needed improvements: // - Create a stop condition (to prevent an infinite loop) // - Create a condition to stop if/when the counter hits zero (0) function resizeText( span, div ){ let fontSizeTxt = span.style.fontSize || '10px'; span.style.fontSize = fontSizeTxt; let fontSizeNum = parseInt( fontSizeTxt ); // IF the text is SMALLER than the containing DIV if( div.offsetHeight > span.offsetHeight ){ span.style.fontSize = `${fontSizeNum + 1}px`; // if the text is still too small, rerun if( div.offsetHeight > span.offsetHeight ){ resizeText( span, div ); } } // IF the text is LARGER than the containing DIV if( span.offsetHeight > div.offsetHeight ){ span.style.fontSize = `${fontSizeNum - 1}px`; // if the text is still too large, rerun if( div.offsetHeight < span.offsetHeight ){ resizeText( span, div ); } } } 

 #target{ width: 200px; height: 200px; overflow: hidden; font-family: Arial; border: solid 1px black; } #target span{ display: block; } 

 <div id="target"></div> <br /> <button id="longText">Add Long Text</button> <br /> <button id="shortText">Add Short Text</button> 

Answer 2

基於@Doug的答案，已實現的解決方案已替換該語句：

currentExprFront.innerHTML = currentExpr.innerHTML;

帶有以下語句：

const k = 1.25;
const lk = Math.log(k);

function scaleAndCopy( d, o ) {
  /* width and height ratios */
  var h = d.offsetHeight/o.offsetHeight; 
  var v = d.offsetWidth/o.offsetWidth; 

  /* adjust to 1.25^n */ 
  h = Math.pow(1.25,Math.floor(Math.log(h)/lk)); 
  v = Math.pow(1.25,Math.floor(Math.log(v)/lk));

  /* set font size ratio and copy */
  var r = 100*Math.min(h,v); 
  d.style.fontSize = `${r}%`; 
  d.innerHTML = o.innerHTML
}

scale( currentExprFront, currentExpr );

此解決方案允許單步調整並保持fontSize對內容的微小變化穩定，因為可能的字體大小值不是連續的，而是100％* 1.25 ^ n：...，80％，100％，125％， 156％，...。