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:
­sci|to| | <wbr>sci|to| | word- scito | Normaler Bindestrich - sci-to- | ​sci|to| |
|---|---|---|---|---|
| scitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscito | sci |
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 | scitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscito |
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 "-" ­ oder ohne Trennzeichen mit dem HTML5 Tag <wbr>. Bei Bedarf wird der Text dann umgebrochen.
Beispiel ­ mit sci-to-:
scitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscitoscito
Ein weitere Möglichkeit ist das Leerzeichen ohne Breite ​, siehe The wbr tag.
Das <wbr> und ­ 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?
