When it comes to ensuring that the font always fits nicely within its container, I rely on using Javascript to set divs or specific class to have their font-size dynamically equal to their width, and adjust their inner text elements accordingly.
If you want to see a demo, check out: http://jsfiddle.net/pjk8t5kb/
<div class="font-size-equals-width">
<h1>Here's a headline</h1>
<p>Here's some paragraph text</p>
</div>
.font-size-equals-width
{
padding: 5%;
border: 1px solid black;
}
.font-size-equals-width h1 { font-size: 0.2em; }
.font-size-equals-width p { font-size: 0.1em; }
function scaleFontSize ( )
{
$('.font-size-equals-width').each(function()
{
var thisContainer = $(this);
thisContainer.css('font-size', thisContainer.width().toString() + 'px');
});
}
$(window).resize(function ( )
{
scaleFontSize();
});
$(document).ready(function()
{
scaleFontSize();
});
I'm curious if achieving this effect is possible using just CSS? As far as I know, the available font-size units are limited to %, em, pt, and px, none of which directly relate to the container's width or height. Does Bootstrap offer any solutions for this? (I typically include Bootstrap in my projects but wonder if I am utilizing it to its full potential.)