Adjust font-size to the width of the div

Question

I have the following html:

<div class="title">
    <span>Some title</span>
</div>

and i need the font-size of the span to be relative to the width of the div. I tried it with the vw:

.title span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 5vw;
}

but that isnt the solution because the container for the viewport does not seem to be the <div class="title"> because when i set it to 5vw for example it is much larger than my <div>.

So how can i set a font-size of a <span> relative to it's parent div.

You cannot using CSS alone. You could use javascript, but first take a look at [fittext.js](http://fittextjs.com/). — , Jun 30 '15 at 16:03

score 2 · Accepted Answer · answered Jun 30 '15 at 16:09

2

Well.. this should get you there, right?

Write a simple if / else condition based on element .width !

if($('div.banner').width() < 800)
{
 //do first
 $('div.banner').css("font-size", newFontSize);
}
else
{
 // do else
}

answered Jun 30 '15 at 16:09

Fred Randall

7,544
21
83
184

Adjust font-size to the width of the div

1 Answers1