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

问题描述

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

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)?

谢谢.

推荐答案

这有点像黑客，但会做你想做的事.

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.

然后这样做:

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屋！