Scale text string to given width

Question

Is it possible to scale a text string's size with CSS or jQuery if the width of the allocated space is known? I need it to increase font size without wrapping the string.

Let's say I have something like this:

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

I suppose I could measure the width by wrapping the string in 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>

Possible duplicate of [JavaScript Scale Text to Fit in Fixed Div](http://stackoverflow.com/questions/4165836/javascript-scale-text-to-fit-in-fixed-div) — David Thomas, Mar 24 '12 at 13:54
It seems like a similar question bu the answer sounds a bit theoretical. I suppose if I knew how to "bump the font-size" up or down and then check again I won't be asking it here... — santa, Mar 24 '12 at 13:54
Do you want to spread the text or increase the font size too. — Starx, Mar 24 '12 at 14:33

score 2 · Answer 1 · edited May 23 '17 at 12:20

2

You need measure the width of text width given font and size. A jquery function for calculate textMetric. After than u can find a rate. And enlarge or recude the font size to fit the give element.

And here my simple example how it works: http://jsfiddle.net/PKkLL/7/

edited May 23 '17 at 12:20

Community

1
1

answered Mar 24 '12 at 14:00

safarov

7,793
2
36
52

I'd like to increase the font size without it wrapping. – santa Mar 24 '12 at 21:40

Starx · Answer 2 · 2012-03-24T21:58:46.923

Here is a plugin I made, which you can use to resize the text

$.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;
};

Usage:

$("div").resizeText();

Check out the demo.

Scale text string to given width

2 Answers2