"Linie unten" auf Schriftlinie

[ChrisB]

Hi,

ich habe einen mehrzeiligen Text in einem div und möchte,

... stattdessen einen vernünftigen Textabsatz benutzen. OK, go.

dass jede Zeile eine "Linie unten" hat, und zwar vom linken bis zum rechten Rand des divs.

Es genügt leider nicht, den Text nur zu unterstreichen, da der Zeilenumbruch unterschiedlich ist. Ebenso wenig genügt es, jede Zeile in eine Tabelle zu packen, da das div dynamisch gefüllt wird.

Ein wiederholtes Hintergrundbild wäre eine Möglichkeit - aber eine schlechte, weil damit die Schriftgrösse absolut angegeben werden müsste; und damit das ganze bei Schriftvergrösserung auch problematisch wird.
Und auch wenn die Schriftgrösse nicht geändert wird, wird das bspw. im FF leicht problematisch - weil der (zumindest in meinem damaligen Test) für die Zeilenhöhe keine unbedingt ganzzahligen Pixelwerte benutzt, sondern teilweise auch Nachkommastellen. Und daraus ergeben sich bei längeren Texten dann auch wieder Verschiebungen.

Eine andere Möglichkeit wäre, den Inhalt in Zeilen aufzusplitten und bspw. in SPANs zu packen, und diese als block darstellen zu lassen (und dann mittels border die Linie zu realisieren). Sollte natürlich clientseitig per JavaScript erfolgen, weil erst dort der Platzbedarf des Textes bekannt ist (und man nicht die HTML-Struktur wegen eines visuellen Effektes versauen möchte). Dabei will natürlich bedacht werden, wie mit Elementinhalten umzugehen ist, die über mehr als eine Zeile dargestellt werden (bspw. längere Linktexte). Und es ist ggf. auch wieder unflexibel bei Schriftgrössenänderung.

Kurz: Dieser Effekt erfordert mit den derzeitigen Möglichkeiten noch ziemlich grossen Aufwand.

MfG ChrisB