CSS/Eigenschaften/Textausrichtung/white-space

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Dieser Artikel behandelt die CSS-Eigenschaft white-space. Für eine allgemeine Erklärung siehe Glossar:Whitespace.


Mit der Eigenschaft white-space kontrollieren Sie das Verhalten der Anzeige von Whitespace (Leerzeichen und Umbrüchen) im Quelltext sowie den automatischen Textumbruch.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0
Beispiel ansehen …
<!doctype html>
<html>
  <head>
  <meta charset="utf-8">
    <title>white-space</title>
    <style>
      .normal     { white-space:normal; }
      .pre        { white-space:pre; 
                    font-family:monospace; }
      .pre-wrap   { white-space:pre-wrap; }
      .pre-line   { white-space:pre-line; }
      .nowrap     { white-space:nowrap; }
    </style>
  </head>
  <body>
    <h1>white-space</h1>
 
<!-- 1. -->
    <p class="normal">
       Hier gilt
       Normales white-space-Verhalten
    </p>
 
<!-- 2. -->
    <pre class="pre">
function example (){
  var="code";       //speichere einen String in der Variable
  alert(var);       //zeige den Inhalt der Variable an.
}
    </pre>
 
<!-- 3. -->
    <p class="pre-line">
          Du musst verstehen
          aus eins mach zehn
          und zwei mach gleich
          so bist du reich!
          ...
<!-- 4. -->
      <cite class="pre-wrap">               Goethe</cite>
    </p>
 
<!-- 5. -->
    <div class="nowrap">Das sprengt doch wieder mal alles: 
       Das Dampfschiffartsgesellschaftskapitänszipfelmützen-White-Space-Verhalten!
    </div>
 
  </body>
</html>
  1. Es gilt das normale Whitespace-Verhalten. Leerzeichen und Umbrüche kollabieren und Text wird umgebrochen, wenn notwendig.
  2. Im Code-Beispiel bleiben Umbrüche und Leerzeichen erhalten. Kein automatischer Umbruch erfolgt.
  3. Im Gedicht bleiben Umbrüche erhalten, normale Leerzeichen aber werden zusammengefasst.
  4. In der Quellenangabe bleibt Whitespace erhalten, so dass der Name eingerückt erscheint. Automatischer Umbruch ist jedoch möglich.
  5. Der automatische Umbruch bei diesem pathologischen Fall wurde durch nowrap verboten.

Die Eigenschaft white-space kontrolliert drei Dinge:

  1. Wie werden Umbrüche im Quelltext behandelt?
  2. Wie werden benachbarte Leerzeichen und Tabs im Quelltext behandelt?
  3. Darf der Text automatisch umgebrochen werden?

white-space nimmt die möglichen Werte:

  • normal (Standardwert) Umbrüche kollabieren, Leerzeichen + Tabs kollabieren, automatischer Umbruch
  • nowrap Umbrüche kollabieren, Leerzeichen + Tabs kollabieren, kein automatischer Umbruch
  • pre Umbrüche werden behalten, Leerzeichen + Tabs werden behalten, kein automatischer Umbruch
  • pre-wrap Umbrüche werden behalten, Leerzeichen + Tabs werden behalten, automatischer Umbruch
  • pre-line Umbrüche werden behalten, Leerzeichen + Tabs kollabieren, automatischer Umbruch
  • inherit Einstellung des Elternelements

[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML