JavaScript 缩放文本以适应固定的 Div

Question

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

原文由 Stephen Watkins 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这有点像 hack，但会做你想做的。

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

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

然后这样做：

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

原文由 sworoc 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

HTML:

 <div class="box" style="width:700px">This is a sentence</div>
<div class="box" style="width:600px">This is a sentence</div>
<div class="box" style="width:500px">This is a sentence</div>
<div class="box" style="width:400px">This is a sentence</div>

脚本：

 $( '.box' ).each(function ( i, box ) {

    var width = $( box ).width(),
        html = '<span style="white-space:nowrap"></span>',
        line = $( box ).wrapInner( html ).children()[ 0 ],
        n = 100;

    $( box ).css( 'font-size', n );

    while ( $( line ).width() > width ) {
        $( box ).css( 'font-size', --n );
    }

    $( box ).text( $( line ).text() );

});

现场演示：http: //jsfiddle.net/e8B9j/2/show/

从 URL 中删除“/show/”以查看代码。

原文由 Šime Vidas 发布，翻译遵循 CC BY-SA 3.0 许可协议