在 JavaScript/jQuery 中，如何在固定宽度的 Div 内缩放不同长度的文本行，以便一行始终适合 Div 内（作为一行）？
谢谢。
JavaScript 缩放文本以适应固定 Div
IT技术
javascript
jquery
html
text
2021-01-27 23:18:49
6个回答
这有点像黑客，但会做你想做的。
<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/”以查看代码。
我写了一个 jQuery 插件来做到这一点：
http://michikono.github.com/boxfit
该插件会将文本水平和垂直缩放到框内的最大可用大小，然后将其居中。
您唯一需要做的就是定义一个包含文本的 div：
<div id="scale">some text</div>
然后调用：
$('#scale').boxfit()
该方法将接受一些参数来禁用/启用文本换行和居中对齐。
对于新的浏览器，您可以使用 Inline-SVG。这可以通过 CSS 像图像一样缩放 ..！
.smallerVersion{
max-width: 50%
}<!DOCTYPE html>
<html>
<head>
<title>Scale SVG example</title>
</head>
<body>
<h2>Default version:</h2>
<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
<style>
.small { font: italic 13px sans-serif; }
.heavy { font: bold 30px sans-serif; }
/* Note that the color of the text is set with the *
* fill property, the color property is for HTML only */
.Rrrrr { font: italic 40px serif; fill: red; }
</style>
<text x="20" y="35" class="small">My</text>
<text x="40" y="35" class="heavy">cat</text>
<text x="55" y="55" class="small">is</text>
<text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>
<h2>Scaled version:</h2>
<svg class="smallerVersion" viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
<style>
.small { font: italic 13px sans-serif; }
.heavy { font: bold 30px sans-serif; }
/* Note that the color of the text is set with the *
* fill property, the color property is for HTML only */
.Rrrrr { font: italic 40px serif; fill: red; }
</style>
<text x="20" y="35" class="small">My</text>
<text x="40" y="35" class="heavy">cat</text>
<text x="55" y="55" class="small">is</text>
<text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>
</body>
</html>( width: 100%;)
大多数其他答案使用循环来减小字体大小，直到它适合 div，这非常慢，因为每次字体更改大小时页面都需要重新渲染元素。我最终不得不编写自己的算法，使其以一种允许我定期更新其内容而不会冻结用户浏览器的方式执行。我添加了一些其他功能（旋转文本、添加填充）并将其打包为 jQuery 插件，您可以在以下位置获取它：
https://github.com/DanielHoffmann/jquery-bigtext
简单地打电话
$("#text").bigText();
它将非常适合您的容器。
在这里查看它的实际效果：
http://danielhoffmann.github.io/jquery-bigtext/
现在它有一些限制，div 必须有固定的高度和宽度，它不支持将文本换行成多行。
Edit2：我现在已经解决了这些问题和限制，并添加了更多选项。您可以设置最大字体大小，也可以选择使用宽度、高度或两者（默认为两者）来限制字体大小。我将努力接受包装元素中的 max-width 和 max-height 值。
其它你可能感兴趣的问题