Labordatei für white-space
Testszenarien
Folgende Fragestellungen können anhand dieser Testdatei überprüft werden:
-
Wie stellen Browser den Inhalt in einem
pre-Element dar? - Wird die Silbentrennung ebenfalls unterdrückt?
- Wie verhalten sich Screen Reader in unterschiedlichen Browsern?
Über diese Testdatei
In dieser Testdatei werden die CSS-Darstellungen von Zweiter Blick übernommen, sofern nicht explizit auf Abweichungen hingewiesen wird.
Fazit
-
white-space: nowrapunterdrückt nicht nur den Zeilenumbruch bei Leerzeichen, sondern auch bei Bindestrichen und automatischer Silbentrennung. Das Verhalten unterscheidet sich nicht vontext-wrap: nowrap! - JAWS interpretiert in Firefox ein
headerElement bei jedem Auftreten alsbanner. - NVDA interpretiert in Chrome und Firefox ein
headerElement lediglich beim ersten Auftretten alsbanner.
Werte in einem <div>-Element
div mit normal
Hier ist kein Leerzeichen vor der Zeile.
Ich bin eine lange Codezeile zum Testen des Zeilenumbruchs unter Einsatz der CSS-Anweisung white-space.
div mit nowrap
Hier ist kein Leerzeichen vor der Zeile.
Ich bin eine lange Codezeile zum Testen des Zeilenumbruchs unter Einsatz der CSS-Anweisung white-space.
div mit Wert pre
Hier ist kein Leerzeichen vor der Zeile.
Ich bin eine lange Codezeile zum Testen des Zeilenumbruchs unter Einsatz der CSS-Anweisung white-space.
div mit Wert pre-wrap
Hier ist kein Leerzeichen vor der Zeile.
Ich bin eine lange Codezeile zum Testen des Zeilenumbruchs unter Einsatz der CSS-Anweisung white-space.
Werte in einem <pre>-Element
normal
Hier ist kein Leerzeichen vor der Zeile.
Ich bin eine lange Codezeile zum Testen des Zeilenumbruchs unter Einsatz der CSS-Anweisung white-space.
pre
Hier ist kein Leerzeichen vor der Zeile.
Ich bin eine lange Codezeile zum Testen des Zeilenumbruchs unter Einsatz der CSS-Anweisung white-space.
pre-wrap
Hier ist kein Leerzeichen vor der Zeile.
Ich bin eine lange Codezeile zum Testen des Zeilenumbruchs unter Einsatz der CSS-Anweisung white-space.
pre-line
Hier ist kein Leerzeichen vor der Zeile.
Ich bin eine lange Codezeile zum Testen des Zeilenumbruchs unter Einsatz der CSS-Anweisung white-space.
nowrap
Hier ist kein Leerzeichen vor der Zeile.
Ich bin eine lange Codezeile zum Testen des Zeilenumbruchs unter Einsatz der CSS-Anweisung white-space.
wrap
Hier ist kein Leerzeichen vor der Zeile.
Ich bin eine lange Codezeile zum Testen des Zeilenumbruchs unter Einsatz der CSS-Anweisung white-space.
break-spaces
Hier ist kein Leerzeichen vor der Zeile.
Ich bin eine lange Codezeile zum Testen des Zeilenumbruchs unter Einsatz der CSS-Anweisung white-space.
collapse
Hier ist kein Leerzeichen vor der Zeile.
Ich bin eine lange Codezeile zum Testen des Zeilenumbruchs unter Einsatz der CSS-Anweisung white-space.
preserve nowrap
Hier ist kein Leerzeichen vor der Zeile.
Ich bin eine lange Codezeile zum Testen des Zeilenumbruchs unter Einsatz der CSS-Anweisung white-space.
preserve wrap
Hier ist kein Leerzeichen vor der Zeile.
Ich bin eine lange Codezeile zum Testen des Zeilenumbruchs unter Einsatz der CSS-Anweisung white-space.
Verhalten der Silbentrennung
(Beispiel: hyphens: manual)
­ bei white-space: normal
Ich bin eine lange Codezeile zum Testen des Zeilenumbruchs unter Einsatz der CSS-Anweisung white-space.
­ bei white-space: pre
Ich bin eine lange Codezeile zum Testen des Zeilenumbruchs unter Einsatz der CSS-Anweisung white-space.
­ bei text-wrap-mode: nowrap
Ich bin eine lange Codezeile zum Testen des Zeilenumbruchs unter Einsatz der CSS-Anweisung text-wrap-mode.
white-space : nowrap / normal und hyphens: auto
Ich bin ein langer Textabschnitt mit Leerzeichen, die nicht umbrechen sollten.
Ich bin ein langer Text-Abschnitt mit Leerzeichen, die nicht umbrechen sollten.
Ich bin ein langer Text-Abschnitt mit Leerzeichen, die umbrechen sollten.
Ich bin ein langer Text-Abschnitt mit Leerzeichen, die nicht umbrechen sollten.
Ich bin ein langer Text-Abschnitt mit Leerzeichen, die umbrechen sollten.