Question

我的页面中有两个div，其格式如下。

＆＃13;

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

＆＃13;

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

＆＃13;

如您所见，第一个是隐藏的。在它上面，一些动态过程（JavaScript，外部服务器的调用，...）完成，直到获得并更新div内容（一个长的数学ml表达式）。它在这个隐藏的div上完成，跳过大量的电影，快速变化，......直到获得最终内容。

获取最终内容后，使用JavaScript语句将currentExpr内容复制到可见div [{1}}：

currentExprFront

问题：我需要缩放内容/ div currentExprFront.innerHTML = currentExpr.innerHTML;以适合预期的大小（currentExprFront）。有时，内容大于此最大值。例如，可能的情况是调整字体大小百分比。

任何提示？非常感谢。

Answer 1

这是我在评论中尝试解释的演示 - JavaScript可以非常快速地移动，以至于用户眼睛不会注意到变化（或浏览器可能无法完全渲染）。所以，利用这种速度优势......

将内容包装到容器中（在本例中为span）。
使用您正在输出的内容填充目标div。
衡量span与div
根据内容是太大还是太小来增加字体大小。

＆＃13;

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 );
    }
  }
  
}

＆＃13;

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

＆＃13;

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

＆＃13;

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％，......

缩放div内容以适合固定大小

2 个答案: