PHP:
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.8.3.js"></script>
<style type="text/css">
body {font-size: 100%;}
#box ul {margin:0; padding: 0;white-space:nowrap;}
#box ul li {list-style:none;}
#box ul li:nth-child(even) {background: #ccc;}
#box ul li:nth-child(odd) {background: #666;}
</style>
</head>
<body>
<div id="box" style="width:400px;">
<ul>
<li><span class='test'>Text</span></li>
<li><span class='test'>hier steht Text</span></li>
<li><span class='test'>Und hier steht noch viel mehr Text</span></li>
</ul>
</div>
<script>
function calcLength()
{
var textLenghts = [];
$('li').each(function(i) {
textLenghts.push($('.test').eq(i).width());
});
textLenghts.sort(function(a,b){return b-a});
return textLenghts[0];
}
function adjustFontSize()
{
var currentFontSize = parseInt( $('#box').css('fontSize') );
var longestLine = calcLength();
var boxWidth = $('#box').width() - 10;
if(longestLine < boxWidth) {
$('#box').css('fontSize', currentFontSize + 1);
adjustFontSize();
}
}
adjustFontSize();
</script>
</body>
</html>Ich habe heute Abend ein Script geschrieben, bei dem sich die Schriftgröße dynamisch an den Container anpasst. Problem hier war, dass die #box eine feste Width in Pixeln hat, die darin liegende <ul> 100% breit sein soll und die einzelnen Texte unterschiedlich lang sein können. Vielleicht steht ja jemand mal vor einer ähnlichen Aufgabe und kann das gebrauchen.
Dabei ging mir durch den Kopf, dass dieser Ansatz ziemlich umständlich ist. Gibt es dafür keine elegantere Lösung, z.B. mit CSS3? Ich habe nichts gefunden.