Rolf B: Seitenumbruch in Zeile erfolgt nicht

Beitrag lesen

SELF-Forum

Seitenumbruch in Zeile erfolgt nicht

Rolf B (Versionen)
– Informationen zu den Bewertungsregeln

Hallo Anja,

es gibt außer HTML - was die Struktur des Dokuments beschreibt und die Inhalte mitbringt - auch die Layout-Ebene. Diese wird durch die Stylesheets beschrieben, CSS.

Ich nehme an, Du verwendest HTML Tabellen für's Layout.

<table>
  <tr>
     <td>Erste Spalte</td>
     <td>Zweite Spalte</td>
  </tr>
  <tr>
     <td>Erste Spalte</td>
     <td>Zweite Spalte</td>
  </tr>
</table>

Wenn ich so eine Seite bei mir mache (mit genügend Inhalt drin, natürlich), wird sie so wie von Dir gewünscht dargestellt, d.h. die Seite wird voll gemacht, so weit es geht, und dann geht es auf der nächsten Seite weiter.

Das heißt: Das Verhalten, das Du erlebst, ist kein Standardverhalten von Chrome oder Firefox. Sondern von diesem Vertragsmanagement hinzugefügt.

Wenn ich über das Stylesheet dem table-Element oder dem tr-Element (nicht dem td Element!) die Eigenschaft break-inside:avoid gebe (page-break-inside wurde umbenannt), habe ich den von Dir beschriebenen Effekt: Die komplette Row verschiebt sich auf die Folgeseite, wenn nicht alles passt.

Dem musst Du mit der Einstellung auto entgegen wirken. Zur Sicherheit setzt Du das vier mal: den alten und den neuen Namen für die Eigenschaft, und für table und tr:

table, tr {
   page-break-inside: auto;
   break-inside: auto;
}

Das Komma ist hier sowas wie ein "oder". Diese Regel besagt: Wenn ein HTML Element ein table oder ein tr Element ist, dann wende die Styles an, die in den geschweiften Klammern stehen. Viele Informationen zu CSS und Stylesheets findest Du im Selfhtml Wiki.

Die Frage ist nur, wie Du diese Style-Regel unterbringen kannst. Schreibst Du vollständiges HTML, inclusive <head> Bereich? Dann setzt Du diese Regel in ein <style> Element. Oder hast Du die Möglichkeit, ein eigenes Stylesheet (eine .css Datei) einzubinden? Dann kannst Du das dort machen.

Oder erzeugst Du nur ein Stück vom <body>-Bereich? Dann müsstest Du in den sauren Apfel beißen und die CSS Eigenschaften mit dem style-Attribut direkt an das table-Element oder die tr-Elemente hängen:

<table style="break-inside: auto; page-break-inside: auto">

Ob es in der Variante mit style-Attribut genügt, die Eigenschaften für das table Element zu setzen, weiß ich nicht. Sie werden vom table Element an die tr Elemente vererbt, und wenn irgendein Stylesheet diese Eigenschaften für tr Elemente setzt, hat das Vorrang. Das musst Du selbst herausfinden.

Ein Webentwickler würde sich dafür die Seite im Browser anzeigen, die Entwicklerwerkzeuge öffnen (F12 Taste oder Strg+Umschalt+I) und dann die table- und tr-Elemente inspizieren (in Chrome unter "Elements", im Firefox unter "Inspektor"). Da kann man sehen, welche Styles für die Elemente gesetzt werden, wo sie herkommen und welche überschrieben werden.

Rolf

--
sumpsi - posui - obstruxi
Beitrag melden
–
Informationen zu den Bewertungsregeln