CODEWITHSUNDEEP
javascriptjquerycss
emirkljucanin
emirkljucanin

Reputation: 814

Fit text to a div

I have a div with fixed height and width and inside I have text that is changing. Sometimes it can be a word or two and sometimes it can be a sentence. What I need is to shrink the font size so the text fits to that div.

Upvotes: 3

Views: 7268

Answers (6)

Hoffmann
Hoffmann

Reputation: 14719

$text.css('font-size', "100px");
$text.css('line-height', "100px");
var foo= $div.width()    / $text.width();
var bar= $div.height()   / $text.height();

if(foo < bar) {
    foo=Math.floor(foo*100) +"px";
    $text.css('font-size', foo);
    $text.css('line-height', foo);
} else {
    bar=Math.floor(bar*100) +"px";
    $text.css('font-size', bar);
    $text.css('line-height', bar);
}

//centralizing text, top and left are defined as 50% on the CSS, optional
$text.css('margin-left', -$text.width()  /2 + "px");
$text.css('margin-top',  -$text.height() /2 + "px");

One small note is that you need to call this function if the div itself changes size. You can bind this code to the resize eventof the div.

Upvotes: 0

Martin Schaer
Martin Schaer

Reputation: 4006

There is a jQuery plugin for that: FitText.js

Here the URL: https://github.com/davatron5000/FitText.js

Here's an example: http://jsfiddle.net/martinschaer/sRvB9/

The function fitText() receives a parameter, with which you need to "play" in order to get the results you want. Also, it resized the text when the window is resized; if you need to have the text resized when (for example) a div is resized, you should add a pair of JS lines for that ;)

Upvotes: 0

chunks_n_bits
chunks_n_bits

Reputation: 284

I had a similar issue, which made me write my own plugin for this. One solution is to use the shrink-to-fit-approach, as described by user54316. However if you have to fit multiple items or are concerned with performance, e.g., on window resize, have a look at jquery-quickfit.

It meassures and calculates a size invariant meassure for each letter of the text to fit and uses this to calculate the next best font-size which fits the text into the container.

The calculations are cached, which makes it very fast (there is virtually no performance hit from the 2nd resize on forward) when dealing with multiple texts or having to fit a text multiple times, like e.g., on window resize. I think it would work perfect in your case.

You'd just have to call 

$('#yourid').quickfit()

after you changed the text.

Production example, fitting 14x16x2 texts

Upvotes: 1

emirkljucanin
emirkljucanin

Reputation: 814

i had an idea and it worked :) here is my code 

        $('li').each(function () {
            while ($(this).outerHeight() > 25) {
                var currentFontSize = $(this).css("font-size");
                $(this).css("font-size", (parseFloat(currentFontSize) - 1) + "px");
            }

        });

Upvotes: 2

Vivek
Vivek

Reputation: 11028

you can do it by defining the font size like......

.small {font-size: 0.8em}

you can see effect here working demo

Upvotes: -2

Catalin
Catalin

Reputation: 868

Try giving the font-size in em:

http://clagnut.com/blog/348/

http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Upvotes: 0

Related Questions