CODEWITHSUNDEEP
phpjavascriptjqueryhtmlcss
syrkull
syrkull

Reputation: 2344

fill a space with text

I am trying to adjust text size so it can fill a certain space

For example : so, lets say that my HTML is like this :

<h1 style="width:120px;">some text</h1>

I want the word "some text" to fill the 120px automatically knowing that "some text" could be anything! I do not care if the font width is stretched or some spaces has been added to the word to make it fit the 120px width.

I know that in CSS we have overflow:hidden; and overflow:scroll; but those two will not help me with anything

overflow:hidden; will hide any extra characters outside the 120px overflow:scroll; will make a scroll which I do not want !

any solutions? maybe a Jquery plugin or something? I have looked everywhere but I could not find anything.

Upvotes: 1

Views: 959

Answers (2)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382122

You may adapt the font to the available space using such a script :

var fontSize = 100;
var reduce = function() {
    $('#txt').css('font-size', fontSize);
    $('#mes').html(fontSize);
    if ($('#txt').width()>MAX_MIDTH) {
       fontSize -= 1;
        reduce();
    }
};
reduce();
$('#width, #height').change(function(){fontSize = 100;reduce()});

Demonstration

Upvotes: 2

Mr. Alien
Mr. Alien

Reputation: 157314

Align your text using text-align: justify

Upvotes: 1

Related Questions