CODEWITHSUNDEEP
javascripthtmlcssxhtml
iceteea
iceteea

Reputation: 1224

How to adapt font-size to div-size?

There is a div with a fixed height & width. This div contains dynamic content, text-content. If the text becomes too long, it will "explode" the div. And when the text becomes 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.

Upvotes: 6

Views: 3947

Answers (5)

brainless
brainless

Reputation: 3

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 :)

Upvotes: 0

Matthew
Matthew

Reputation: 8426

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.

Upvotes: 3

Brighty
Brighty

Reputation: 393

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.com/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.

Upvotes: 1

Connell
Connell

Reputation: 14421

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');
    }); 
});

Upvotes: 2

Litek
Litek

Reputation: 4888

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

Upvotes: 3

Related Questions