JavaScript缩放文本以适应固定Div

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (23)

在JavaScript / jQuery中,如何在固定宽度的Div内缩放变长的文本行,以便一行总是适合Div(作为一行)?

提问于
用户回答回答于

这有些黑客,但会做你想做的。

<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());
用户回答回答于

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>

JavaScript的:

$( '.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 /”以查看代码。

扫码关注云+社区