nicht angemeldet
Hallo Chris,
Schön wäre halt das ohne Tabelle hinzubekommen, aber ob das geht?
afaik wird das nur mit CSS alleine nicht gehen :-(
DeWitt hat ja schon eine auf Javascript basierende Variante gepostet.
Aber selbst unter Zuhilfenahme anderer Techniken, egal ob server- oder clientseitig wird das imho nie richtig funktionieren.
Trotzdem habe ich mal eine CSS- und JS-Variante gebastelt, die annähernd das tun, was du meiner Meinung nach willst.
CSS-Variante:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Textbloecke auf die ganze Breite verteilen</title>
<style type="text/css">
<!--
body {margin: 0;padding: 0;}
div {height: 1.2em; text-align: justify; overflow: hidden;}
div p {width: auto; margin: 0; line-height: 1.2em; overflow: hidden;}
#text1 {float: left;width: 24%; background-color: #ccc;}
#text2 {float: left;width: 30%;background-color: #333; color: #fff;}
#text3 {float: left;width: 12%;background-color: #ccc; }
#text4 {float: left;width: 15%;background-color: #333; color: #fff; }
#text5 {float: left;width: 17%;background-color: #ccc; }
.punkt {float: left;width: .5%;background-color: #f00;}
-->
</style>
</head>
<body>
<div style="width: 100%; margin: 0; padding: 0;">
<div id="text1"><p>Textblock der ganz links stehen soll <span>Blind-Text-zwecks-Zeilenumbruch</span></p></div>
<div class="punkt">:</div>
<div id="text2"><p>Textblock Nummer zwei mit superlangem Text Blind-Text-zwecks-Zeilenumbruch</p></div>
<div class="punkt">:</div>
<div id="text3"><p>Textblock kurz Blind-Text-zwecks-Zeilenumbruch</p></div>
<div class="punkt">:</div>
<div id="text4"><p>Textblock mittellang Blind-Text-zwecks-Zeilenumbruch</p></div>
<div class="punkt">:</div>
<div id="text5"><p>Textblock der rechts steht Blind-Text-zwecks-Zeilenumbruch</p></div>
</div>
</body>
</html>
Javascript-Variante:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Textbloecke auf die ganze Breite verteilen</title>
<style type="text/css">
<!--
body {margin: 0;padding: 0;}
#stretch {width: auto; word-spacing: normal; white-space: nowrap;}
-->
</style>
</head>
<body id="body">
<span id="stretch">Textblock, der von ganz links bis nach ganz rechts 'gestreckt' und nicht umgebrochen werden soll!</span>
<script type="text/javascript">
<!--
satz=document.getElementById('stretch').innerHTML;
woerter = satz.split(" ");
fensterbreite=document.getElementById('body').offsetWidth;
satzbreite=document.getElementById('stretch').offsetWidth;
if(fensterbreite>satzbreite) {
abstand=(fensterbreite-satzbreite)/(woerter.length-1);
document.getElementById('stretch').style.wordSpacing=abstand+"px";
}
//-->
</script>
</body>
</html>
Beide Varianten haben erhebliche Nachteile (Mängel) und funktionieren alles andere als 'problemlos' und wenn überhaupt nur in bestimmten Browsern, so dass ich von einem Einsatz in der Praxis_dringend_abraten würde.
Gruß Gunther
Mein SelfCode: fl:( br:& va:) ls:[ fo:| rl:( n4:& ss:| de:] js:| ch:? zu:|
http://www.peter.in-berlin.de/projekte/selfcode/?code=fl%3A(+br%3A%26+va%3A)+ls%3A[+fo%3A|+rl%3A(+n4%3A%26+ss%3A|+de%3A]+js%3A|+ch%3A%3F+zu%3A|