Hallo Webblob,
handelt es sich dabei immer um dieselben Wörter?
Nein
Bei welcher Fenstergröße denn?
Die Problematik mit Fenstergröße usw. ist mir bewusst. Deswegen erstelle ich alle Seiten mit relativen Schriftgrößen, ohne feste Grafiken usw.
also sollen die Wörter selber nicht 'gestreckt' werden, sondern nur der Wortabstand 'vermittelt'?
Ja
rein aus Neugierde (und um dir vielleicht eine Alternative vorschlagen zu können): Wofür/wobei soll das sein?
Das ist so als Designstudie gedacht. Ich möchte einfach mal was andres probieren.
Mittlerweile habe ich mein Konzept umgeworfen und es sind nicht nur einzelne Wörter die ich auf eine Zeile verteilen will, sondern mehrere Wörter je Textblock.
Hier ist mein momentanes Coding, ich habe das mit einer Tabelle gelöst. Im CSS kannst du die Farben ausschalten und mal ohne Hintergrund ansehen, momentan ist er nur zur Kennzeichnung wegen den Größenverhältnissen drin.
Der Text wird umgebrochen wenn der Platz zu klein wird und bei genug Platz werden nur die Zwischenräume größer.
Auch wenn man die Textgröße im Browser ändert stimmt noch alles. Ich habe das bisher nur auf einem Mac getestet da ich hier keinen Windows Rechner zur Verfügung habe.
Schön wäre halt das ohne Tabelle hinzubekommen, aber ob das geht?
Grüße, Chris
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>Textbloecke auf die ganze Breite verteilen</title>
<style type="text/css">
<!--
.text { background-color: #dddddd; }
.punkt { background-color: #ccffcc; }
-->
</style>
</head>
<body>
<table width="100%" summary="Layouttabelle">
<colgroup>
<col style="width: 15em;">
<col>
<col style="width: 20em;">
<col>
<col style="width: 7em;">
<col>
<col style="width: 9em;">
<col>
<col style="width: 11em;">
<colgroup>
<tr>
<td class="text">Textblock der ganz links stehen soll</td>
<td style="text-align: center;" class="punkt">·</td>
<td style="text-align: center;" class="text">Textblock Nummer zwei mit superlangem Text</td>
<td style="text-align: center;" class="punkt">·</td>
<td style="text-align: center;" class="text">Textblock kurz</td>
<td style="text-align: center;" class="punkt">·</td>
<td style="text-align: center;" class="text">Textblock mittellang</td>
<td style="text-align: center;" class="punkt">·</td>
<td style="text-align: right;" class="text">Textblock der rechts steht</td>
</tr>
</table>
</body>
</html>