Responsive HTML Tabellen und Worttrenner (Hyphen) in HTML (&shy; oder <wbr>)

Estimated reading time of this article: 2 minutes 24 seconds

Beim Responsive Design können Tabellen schnell ein Problem werden, da sie zu gross werden. Eine Möglichkeit der Grössenanpassung ist, dass der Zelleninhalt umgebrochen werden kann.

Beispiel:

&shy;
sci|to|
<wbr>
sci|to|
word-wrap:break-word
scito
Nor­ma­ler Bin­de­strich -
sci-to-
&#8203;
sci|to|
sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­ scitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscito scitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscito sci-to-sci-to-sci-to-sci-to-sci-to-sci-to-sci-to-sci-to-sci-to-sci-to-sci-to-sci-to-sci-to-sci-to sci​to​sci​to​sci​to​sci​to​sci​to​sci​to​sci​to​sci​to​sci​to​sci​to​sci​to​sci​to​sci​to​sci​to​sci​to​sci​to​sci​to​sci​to​sci​to​sci​to​

Die verschiedenen Effekte werden sichtbar, wenn das Browserfenster vergrössert und verkleinert wird.

Der Zelleninhalt kann generell mit CSS3 word-wrap:break-word umgebrochen werden, siehe How to prevent HTML tables from becoming too wide. Dass es funktioniert muss die Tabelle auf table-layout:fixed gesetzt werden, denn sonst wird die Tabelle angepasst.

Bei Tabellenkopfzeilen können die Wortumbrüche auch gezielt gesetzt, entweder mit dem Soft Hyphen Trennzeichen "-" &shy; oder ohne Trennzeichen mit dem HTML5 Tag <wbr>. Bei Bedarf wird der Text dann umgebrochen.

Beispiel &shy; mit sci-to-:
sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­sci­to­

Ein weitere Möglichkeit ist das Leerzeichen ohne Breite &#8203;, siehe The wbr tag.

Das <wbr> und &shy; scheinen mittlerweile von den Browsern unterstützt zu werden und können gebraucht werden.

Firefox unterstützt seit Version 8 die automatische Trennung von Wörtern.

    p.none { 
      -moz-hyphens: none; 
      hyphens: none; 
    } 
    p.manual { 
      -moz-hyphens: manual; 
      hyphens: manual; 
    } 
    p.auto { 
      -moz-hyphens: auto; 
      hyphens: auto; 
    } 

Beispiel mit aktivierter automatischer Trennung (Firefox 8 und Safari):

Dies ist ein deutscher Testtext mit eingestellter automatischer Trennung. Vergrössern Sie das Browserfenster und prüfen Sie, ob die Trennung automatisch funktioniert. Welche Rechtschreibung wird genommen? Die neue oder die alte? Dies ist ein deutscher Testtext mit eingestellter automatischer Trennung. Vergrössern Sie das Browserfenster und prüfen Sie, ob die Trennung automatisch funktioniert. Welche Rechtschreibung wird genommen? Die neue oder die alte? Dies ist ein deutscher Testtext mit eingestellter automatischer Trennung. Vergrössern Sie das Browserfenster und prüfen Sie, ob die Trennung automatisch funktioniert. Welche Rechtschreibung wird genommen? Die neue oder die alte? Dies ist ein deutscher Testtext mit eingestellter automatischer Trennung. Vergrössern Sie das Browserfenster und prüfen Sie, ob die Trennung automatisch funktioniert. Welche Rechtschreibung wird genommen? Die neue oder die alte?

Beispiel ohne aktivierte automatische Trennung:

Dies ist ein deutscher Testtext mit eingestellter automatischer Trennung. Vergrössern Sie das Browserfenster und prüfen Sie, ob die Trennung automatisch funktioniert. Welche Rechtschreibung wird genommen? Die neue oder die alte? Dies ist ein deutscher Testtext mit eingestellter automatischer Trennung. Vergrössern Sie das Browserfenster und prüfen Sie, ob die Trennung automatisch funktioniert. Welche Rechtschreibung wird genommen? Die neue oder die alte? Dies ist ein deutscher Testtext mit eingestellter automatischer Trennung. Vergrössern Sie das Browserfenster und prüfen Sie, ob die Trennung automatisch funktioniert. Welche Rechtschreibung wird genommen? Die neue oder die alte? Dies ist ein deutscher Testtext mit eingestellter automatischer Trennung. Vergrössern Sie das Browserfenster und prüfen Sie, ob die Trennung automatisch funktioniert. Welche Rechtschreibung wird genommen? Die neue oder die alte?

Unicodezeichen für die Trennung. Das Minus Zeichen (-) sollte von der Bedeutung nicht mit dem harten Trennzeichen (‑) verwechselt werden.

U+002D - Hyphen-minus
U+00AD ­ Soft hyphen
U+2010 Hyphen
U+2011 Non-Breaking Hyphen

Ein genereller Hintergrundbericht: Soft hyphen (SHY) – a hard problem?