javascript - 缩放 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上完成，跳过了很多flicks，快速变化，......直到获得最终内容。

当获得最终内容时，currentExpr 内容被复制到可见的 div currentExprFront 使用 JavaScript 语句:

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>