Это javascript-решение (с Mootools), которое уменьшит размер шрифта, чтобы он соответствовал границам elHeader.
while (elHeader.clientWidth < elHeader.scrollWidth || elHeader.clientHeight < elHeader.scrollHeight) {
var f = parseInt(elHeader.getStyle('font-size'), 10);
f--;
elHeader.setStyle('font-size', f + 'px');
}
CSS elheader:
width:100%;
font-size:40px;
line-height:36px;
font-family:Arial;
text-align:center;
max-height:36px;
overflow:hidden;
Обратите внимание, что оболочка elHeader устанавливает ширину elHeader.