缩放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％，...。