JavaScript缩放文本以适应固定Div

Question

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

谢谢.

Answer 1

这有点像黑客,但会做你想要的.

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

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>

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 /"以查看代码.

Answer 3

我写了一个jQuery插件来做到这一点:

http://michikono.github.com/boxfit

该插件将文本水平和垂直缩放到框内的最大可用大小,然后居中.

您唯一需要做的就是在其中定义一个带有文本的div:

<div id="scale">some text</div>

然后打电话:

$('#scale').boxfit()

该方法将接受一些参数来禁用/启用文本换行和居中对齐.

Answer 4

对于新的浏览器,您可以使用Inline-SVG.这可以通过CSS缩放像图像..!(width: 100%;)

Answer 5

我不知道确切的方法，但这是一个近似值：

var factor = 1/3;  // approximate width-to-height ratio
var div = $('#mydiv');
div.css('font-size', div.width() / (div.text().length * factor) + 'px');

您将需要factor根据您使用的字体进行调整。1/3 似乎适用于 Times New Roman。

Answer 6

大多数其他答案都使用循环来减小字体大小,直到它适合div为止,这非常慢,因为每次字体更改大小时页面都需要重新渲染元素.我最终不得不编写自己的算法,使其以允许我定期更新其内容而不冻结用户浏览器的方式执行.我添加了一些其他功能(旋转文本,添加填充)并将其打包为jQuery插件,您可以在以下位置获取:

https://github.com/DanielHoffmann/jquery-bigtext

简单地打电话

$("#text").bigText();

它很适合你的容器.

在这里看到它:

http://danielhoffmann.github.io/jquery-bigtext/

目前它有一些限制,div必须具有固定的高度和宽度,并且它不支持将文本包装成多行.

Edit2:我现在已经解决了这些问题和限制,并添加了更多选项.您可以设置最大字体大小,也可以选择使用宽度,高度或两者来限制字体大小(默认为两者).我将努力接受包装器元素中的max-width和max-height值.