fill a space with text

Question

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.

Do you want your text to extend to other lines or do you want it to be always on one line ? — Denys Séguret, Nov 25 '12 at 21:00

score 2 · Accepted Answer · answered Nov 25 '12 at 20:56

2

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

answered Nov 25 '12 at 20:56

Denys Séguret

355,860
83
755
726

Yes, for [a question a little similar](http://stackoverflow.com/questions/13416673/javascript-convert-width-and-height-to-font-size) (I'm trying to see if this one can be said to be a duplicate). – Denys Séguret Nov 25 '12 at 20:57

score 1 · Answer 2 · answered Nov 25 '12 at 20:54

1

Align your text using text-align: justify

answered Nov 25 '12 at 20:54

Mr. Alien

147,524
33
287
271

what if I have a long name that needs more than 120px – syrkull Nov 25 '12 at 20:56
Why not checking? It will be broken into multi line text. – Marcin Orlowski Nov 25 '12 at 20:57
I only want the test to be on one line – syrkull Nov 25 '12 at 21:27

fill a space with text

2 Answers2