There is a div with a fixed height & width. This div contains dynamic content, text-content. If the text bees too long, it will "explode" the div. And when the text bees too short the div will look kinda empty.

So my conclusion would be to make the font bigger when the text is short and smaller when the text is long.

Never tried such a thing, how to achieve this?

€: as I'm using already dojo as js framework including jquery or any other framework is no option. Of course still thanks for the answers.

There is a div with a fixed height & width. This div contains dynamic content, text-content. If the text bees too long, it will "explode" the div. And when the text bees too short the div will look kinda empty.

So my conclusion would be to make the font bigger when the text is short and smaller when the text is long.

Never tried such a thing, how to achieve this?

€: as I'm using already dojo as js framework including jquery or any other framework is no option. Of course still thanks for the answers.

• javascript
• html
• css
• xhtml

• possible duplicate of Programmatically determine Font-Size for single-line display – JJJ Commented Nov 14, 2011 at 11:40
• 1 zachleat./bigtext/demo – katspaugh Commented Nov 14, 2011 at 11:59
• Remember too you can specify a % for font size. Might help you cut down on coding. – Matthew Commented Nov 15, 2011 at 2:01
• Ultimately, font size is not under your control, it's under the user's control. How are you going to handle someone who has min font size set to 24px? I think whenever you're faced with the notion of getting overly tricky to acmodate a design, it's appropriate to ask: is this really good UX? Sounds like this case, for some users, say low vision users, the answer is "no". – steveax Commented Nov 15, 2011 at 2:18

5 Answers 5

Create another element inside your DIV and add the text.

Divide the width of your DIV by the element, multiply by 100 and you've got the percentage value for css font-size.

You'll have to play around with the font size on your outer DIV to get the right fit though.

There are numerous plugins that might be sutable for this. One of them here.

jQuery is probably the easiest option here. You can use the css function to change the font-size of the box if the height is higher than a certain value? Have a look at this fiddle (which I've tested in Chrome).

$(function() {
    $('.text').each(function() {
       if($(this).height() > 30)
           $(this).css('font-size', '12px');
    }); 
});

You could do this with javascript by using string.length to get the length of your string, and then the jquery .css() method to set the size dynamically (http://api.jquery./css/). Or if you can do some serverside scripting with your set up you could set the size with an inline style before the page loads. The jquery .css method is here

edit: Following your edit re dojo, you can use the same basic method but just set the font size using dojo methods rather than jquery ones. This tutorial looks helpful.

it's possible with jquery

$(document).ready(function() {
var originalFontSize = 12;
var sectionWidth = $('...').width();
$('...').each(function(){
var spanWidth = $(this).width();
var newFontSize = (sectionWidth/spanWidth) * originalFontSize;
$(this).css({"font-size" : newFontSize, "line-height" : newFontSize/1.2 + "px"});
});
}); 

hope this helped! i post kinda the same question and the moderator said that is an off-topic question :)