Zeilenumbrüche in Tabellen

[c.i.b.magic]

Hallöchen zusammen,

ich verzweifel nach mehreren Stunden des herumprobierens (und gehe fast davon aus, dass es keine Lösung gibt)

folgendes Problem :
ich schreibe via JavaScript (geht nicht anders, da ich eine Webanwendung unter LotusNotes entwickele) Werte in Tabellenzellen, die eine ID besitzen (mithilfe von id und node)

Die Werte bestehen aus einer 4-stelligen Zahl und einem n-stelligen Text. Pro Zelle kommt dies n-fach vor, sodaß eine Zelle auch 10 oder mehr Zeilen hat (getrennt durch <br>). Ist der Text kurz, bestehen keine Probleme.
Ist der Text lang, begeht der Browser einen Zeilenumbruch in der zelle (muss er auch sonst nicht lesbar und vor allem nicht druckbar).

Das Ergebnis sieht dann so aus
4711   hier kommt ein fürchterlich
langer text in die Zelle
4712   hier ein kurzer Text
4713   und hier wieder was richtig
langes

Es sollte aber so aussehen
4711   hier kommt ein fürchterlich
       langer text in die Zelle
4712   hier ein kurzer Text
4713   und hier wieder was richtig
       langes

Ich habe inzwischen alles probiert, unter anderem in zwei Zellen nebeneinander zu schreiben, dann verrutschen aber die Nummern, da diese den Zeilenumbruch in der Textzelle nicht mitbekommen.
Auch mit Text-Indent (+/-), padding-left u.a. habe ich getestet.

Das Problem ist eindeutig, dass der Browser kein HTML-Objekt anpacken kann, da der zeilenumbruch kein Objekt, sondern ein vom Browser erzwungenes Ereignis ist. Was der Druckertreiber dann noch macht, vermag niemand abzusehen.

Kennt jemand eine Möglichkeit, via CSS o.ä. mein gewünschtes aussehen hinzubekommen ?

Besten Dank
Stephan

[Ashura]

Hallo c.i.b.magic.

Es sollte aber so aussehen
4711   hier kommt ein fürchterlich
       langer text in die Zelle
4712   hier ein kurzer Text
4713   und hier wieder was richtig
       langes

Also eine solche Struktur?

<table>  
  <tr>  
    <td>4711</td>  
    <td>hier kommt ein fürchterlich langer text in die Zelle</td>  
  </tr>  
  <tr>  
    <td>4712</td>  
    <td>hier ein kurzer Text</td>  
  </tr>  
  <tr>  
    <td>4713</td>  
    <td>und hier wieder was richtig langes</td>  
  </tr>  
</table>

Kennt jemand eine Möglichkeit, via CSS o.ä. mein gewünschtes aussehen hinzubekommen ?

Du könntest alternativ auch die Nummer in ein Element packen (span, o. Ä.), dieses per display:block formatieren, ihm eine angemessene Breite verpassen und es links floaten lassen. Der Text daneben benötigte dann nur noch ein margin-left, welches ebenso groß ist, wie die Breite des Elementes, in dem sich die Nummer befindet.
Erschwert wird das Ganze aber durch deine gewünschte Optik. Das Element, in dem Nummer und Text stehen muss daher einen von „visible“ abweichenden Wert für overflow bekommen und der Text muss ebenfalls in ein Element gepackt werden und floaten.

Ich persönlich erkenne hier aber tabellarische Daten, weshalb eine Tabelle hier sehr gut geeignet ist. Es gibt zudem <http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#table@title=nützliche vorgefertigte Methoden zum Manipulieren von Tabellen>.

Einen schönen Donnerstag noch.

Gruß, Ashura

[Stephan]

Hallo Ashura,

ersteinmal besten Dank, aber die von Dir "erkannte" Struktur ist nicht korrekt.
Tatsächlich sieht das ganze so aus :

<table>  
<tr>  
  <td>  
     4711 hier kommt ein fürchterlich langer text in die Zelle  
     <br>  
     4712 hier ein kurzer Text  
     <br>  
     4713 und hier wieder was richtig langes  
     <br>  
  </td>  
  </tr>  
<tr>  
</table>

Natürlich weiss ich, dass das ganze unschön und nicht im Sinne des Erfinders ist. Aber, wie bereits beschrieben, es handelt sich nicht um statische Daten, sondern um dynamische, die aus einem LotusNotesSystem kommen; d.h. ich weiss garnicht, ob eine oder 100 Datenzeilen kommen werden. Aus diesem Grund kann ich die "td" nicht in Anzahl x hart anlisten, diese aber auch nicht vom Notes generieren lassen. Also bleibt nur, ein (1) "td" zu coden und dies mit allen Daten zu füllen.
Aus diesem Grund kann ich die Daten auch nicht in ein "span" packen, da alle Daten nur in diesem einen "span" stünden - damit habe ich aber den Zugriff auf einen einzelnen Datensatz verloren.

Mit diesen Möglichkeiten hatte ich natürlich viel getestet - erfolglos.

Die einzige Möglichkeit ist die, dass jeder einzelnen Datensatz in einem "a"-tag steht, das müsste ich anpacken und die zweite (oder die erste) Zeile manipulieren.

Leider lässt sich das von Deinem Mitbeantworter vorgeschlagene :first-line nicht auf "a"-tags anwenden.

Damit bleibt mein Problem.....

Trotzdem besten Dank, wenn Du noch eine Idee hättest wäre ich dankbar

Gruß
Stephan

Hallo c.i.b.magic.

Es sollte aber so aussehen
4711   hier kommt ein fürchterlich
       langer text in die Zelle
4712   hier ein kurzer Text
4713   und hier wieder was richtig
       langes

Also eine solche Struktur?

<table>

<tr>
    <td>4711</td>
    <td>hier kommt ein fürchterlich langer text in die Zelle</td>
  </tr>
  <tr>
    <td>4712</td>
    <td>hier ein kurzer Text</td>
  </tr>
  <tr>
    <td>4713</td>
    <td>und hier wieder was richtig langes</td>
  </tr>
</table>

>   
> > Kennt jemand eine Möglichkeit, via CSS o.ä. mein gewünschtes aussehen hinzubekommen ?  
>   
> Du könntest alternativ auch die Nummer in ein Element packen (span, o. Ä.), dieses per display:block formatieren, ihm eine angemessene Breite verpassen und es links floaten lassen. Der Text daneben benötigte dann nur noch ein margin-left, welches ebenso groß ist, wie die Breite des Elementes, in dem sich die Nummer befindet.  
> Erschwert wird das Ganze aber durch deine gewünschte Optik. Das Element, in dem Nummer und Text stehen muss daher einen von „visible“ abweichenden Wert für overflow bekommen und der Text muss ebenfalls in ein Element gepackt werden und floaten.  
>   
> Ich persönlich erkenne hier aber tabellarische Daten, weshalb eine Tabelle hier sehr gut geeignet ist. Es gibt zudem <http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#table@title=nützliche vorgefertigte Methoden zum Manipulieren von Tabellen>.  
>   
>   
> Einen schönen Donnerstag noch.  
>   
> Gruß, Ashura  
> 

[as]

Hallo, Stephan.

Das Problem ist eindeutig, dass der Browser kein HTML-Objekt anpacken kann, da der zeilenumbruch kein Objekt, sondern ein vom Browser erzwungenes Ereignis ist.

Kennt jemand eine Möglichkeit, via CSS o.ä. mein gewünschtes aussehen hinzubekommen ?

CSS kennt Pseudoelemente: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#first_line_letter_child. Dazu müßte jeder Eintrag ein echtes HTML-Element sein.

Geht es so?

[c.i.b.magic]

Hallo as,

danke ersteinmal für die Hilfe !!

Das ganze klingt vielversprechend - obwohl erste schnelle Test fehlgeschlagen sind.
Damit die Struktur nicht "schiesst" kann ich die einzelnen Datensätze lediglich in 2 (?) TAGS packen, um ein Ojekt zu erhalten :
entweder ein "a" oder ein "span" - TAG (korrigier mich, wenn es eine weitere Möglichkeit gibt [DIV würde ja meine Struktur schiessen])

Leider ist :first-line weder auf "a" und schon garnicht auf "span" anwendbar.

Wenn Du also noch Ideen hättest... ?!

Auf jeden fall danke für den Tip, :first.... kannte ich tatsächlich noch nicht - wird mir in Zukunft gute Dienste leisten.

Beste Grüsse
Stephan

Hallo, Stephan.

Das Problem ist eindeutig, dass der Browser kein HTML-Objekt anpacken kann, da der zeilenumbruch kein Objekt, sondern ein vom Browser erzwungenes Ereignis ist.

Kennt jemand eine Möglichkeit, via CSS o.ä. mein gewünschtes aussehen hinzubekommen ?

CSS kennt Pseudoelemente: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#first_line_letter_child. Dazu müßte jeder Eintrag ein echtes HTML-Element sein.

Geht es so?

[c.i.b.magic]

Hallo as,

nochmal ich.

Vergiss, was ich über das Layout "schiessen" mit "div"s geschrieben habe - ich habe einfach nur meine "br" entfernt und schon funktioniert es auch mit "div".

Allerding kann man mit :first-line nur die Texteigenschaften manipulieren (Farbe, Größe, Fette etc.). Auf die Position kann ich weder mit text-indent; position ...; padding-left  zugreifen.

Gruß
Stephan

Hallo, Stephan.

Das Problem ist eindeutig, dass der Browser kein HTML-Objekt anpacken kann, da der zeilenumbruch kein Objekt, sondern ein vom Browser erzwungenes Ereignis ist.

Kennt jemand eine Möglichkeit, via CSS o.ä. mein gewünschtes aussehen hinzubekommen ?

CSS kennt Pseudoelemente: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#first_line_letter_child. Dazu müßte jeder Eintrag ein echtes HTML-Element sein.

Geht es so?

[as]

Hi, Stephan.

Allerding kann man mit :first-line nur die Texteigenschaften manipulieren (Farbe, Größe, Fette etc.). Auf die Position kann ich weder mit text-indent; position ...; padding-left  zugreifen.

Das wußte ich nicht. Ich hab´s gerade beim W§C nachgeschlagen und es ist so vorgesehen wie Du sagst. Da habe ich etwas gelernt; danke und sorry für die falsche Fährte.

Jetzt fällt mir nur noch eins ein:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">

<html>
 <head>
  <title>First Line</title>
  <style type="text/css">

div {margin: 0.5em 0; padding-left: 3em; text-indent: -3em; font-family: monospace;}

{border: 1px solid red !important;}
  </style>
 </head>

<body>
  <table>
   <tr>
    <td>
     <div>1111 Man kann nur Br&uuml;cken schlagen zwischen Ufern die man auseinanderh&auml;lt. Denn wo es keine Gr&auml;ben gibt, da gibt es auch keine Unterschiede, und wo es keine Unterschiede gibt, da ist kein Leben.</div>

<div>5555 Man kann nur Br&uuml;cken schlagen zwischen Ufern die man auseinanderh&auml;lt. Denn wo es keine Gr&auml;ben gibt, da gibt es auch keine Unterschiede, und wo es keine Unterschiede gibt, da ist kein Leben.</div>

<div>7597 Man kann nur Br&uuml;cken schlagen zwischen Ufern die man auseinanderh&auml;lt. Denn wo es keine Gr&auml;ben gibt, da gibt es auch keine Unterschiede, und wo es keine Unterschiede gibt, da ist kein Leben.</div>
    </td>
   </tr>
  </table>
 </body>
</html>

Ich hoffe das geht.

[c.i.b.magic / Stephan]

Hi as,

ich hatte zwar schon eine Antwort geschrieben, die ist aber wohl im Nirvana verschwunden, also nochmals :

D A N K E  !!!!

Das war's !!!!
Ich hatte zwar in meinen unzähligen Versuchen vor Eintrag ins Forum genau diesen Weg bereits getestet, allerdings die Werte für padding und indent mit "px" gesetzt. Das funktionierte nicht - mit deinem Vorschlag "em" tut's !

Also, ein virtueller Kasten Bier an Deine Adresse (!!!) und nochmals vielen Dank

Gruß
Stephan

div {margin: 0.5em 0; padding-left: 3em; text-indent: -3em; font-family: monospace;}