JavaScript缩放文本以适应固定Div [英] JavaScript Scale Text to Fit in Fixed Div

问题描述

在JavaScript / jQuery中，如何在固定宽度Div内缩放变长的文本行，以便一行总是适合Div（作为一行）？

感谢。

解决方案

这有点破解，但会做你想做的事情。 >

 < div id =hidden-resizerstyle =visibility：hidden>< / div> 
  

将它放在页面的底部，它不会移动页面上的其他元素。

然后执行此操作：

  var size; 
 var desired_width = 50; 
 var resizer = $（＃hidden-resizer）; 
 
 resizer.html（这是我想调整大小的文字。）; （resizer.width（）> desired_width）{
 size = parseInt（resizer.css（font-size），10）; 
 
。 
 resizer.css（font-size，size  -  1）; 
 
 
 $（＃target-location）。css（font-size，size）.html（resizer.html（））; 
  

In JavaScript/jQuery, how can I scale a varying-length line of text inside a fixed-width Div so that the one line always fits inside the Div (as one line)?

Thanks.

解决方案

This is somewhat of a hack, but will do what you want.

<div id="hidden-resizer" style="visibility: hidden"></div>

Place this at the bottom of your page, where it will not be moving other elements on the page.

Then do this:

var size;
var desired_width = 50;
var resizer = $("#hidden-resizer");

resizer.html("This is the text I want to resize.");

while(resizer.width() > desired_width) {
  size = parseInt(resizer.css("font-size"), 10);
  resizer.css("font-size", size - 1);
}

$("#target-location").css("font-size", size).html(resizer.html());

这篇关于JavaScript缩放文本以适应固定Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！