将文本字符串缩放到给定宽度答案

【问题标题】：Scale text string to given width将文本字符串缩放到给定宽度
【发布时间】：2012-03-24 13:45:21
【问题描述】：

如果分配空间的宽度已知，是否可以使用 CSS 或 jQuery 缩放文本字符串的大小？我需要它来增加字体大小而不用换行。

假设我有这样的事情：

<div style="width:600px">My text string here.</div>

我想我可以通过将字符串包裹在 span 中来测量宽度

JS：

var strWidth = $("#myStr").width(),
    strFontS = 20;

if (strWidth < 600) {
    // maybe increase font-size
    $("#myStr").css("font-size", strFontS + 1 + "px");
}

HTML：

<div id="myDiv" style="width:600px"><span id="myStr">My text string here.</span></div>

【问题讨论】：

JavaScript Scale Text to Fit in Fixed Div的可能重复
这似乎是一个类似的问题，但答案听起来有点理论。我想如果我知道如何“提高或降低字体大小”然后再检查一次，我就不会在这里问了......
是的，我……对不起。我最初发布了错误的链接=/
你是要散开文字还是增加字体大小。
我想增加字体大小。

标签： jquery css

【解决方案1】：

您需要测量给定字体和大小的文本宽度。用于计算 textMetric 的 jquery 函数。之后你可以找到一个费率。并放大或缩小字体大小以适合给定元素。

下面是我的简单示例：http://jsfiddle.net/PKkLL/7/

【讨论】：

【解决方案2】：

这是我做的一个插件，可以用来调整文字大小

$.fn.resizeText = function(){
  var size = parseInt($(this).css("fontSize"));  
  var html = $(this).html();
  var textLength = html.length;
  var span = '<span>' + html + '</span>';
  $(this).html(span);
  var width = $(this).find('span:first').width();
  $(this).html(html);
  var newSize = $(this).width()/width*size;
  $(this).css("fontSize", newSize);
  return width;
};

用法：

$("div").resizeText();

查看demo。

【讨论】：