Question

如果已知已分配空间的宽度，是否可以使用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>

Answer 1

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

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

Answer 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。

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

2 个答案: