Revision 933359 of white-space

<div>{{CSSRef}}</div>

<h2 id="Summary" name="Summary">Zusammenfassung</h2>

<p>Die <code>white-space</code> CSS-Einstellung wird benutzt, um Leerzeichen innerhalb eines Elementes zu handhaben.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="brush: css">
/* Schlüsselwortwerte */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

/* Globale Werte */
white-space: inherit;
white-space: initial;
white-space: unset;
</pre>

<h3 id="Values" name="Values">Werte</h3>

<dl>
 <dt><code>normal</code></dt>
 <dd>Aufeinanderfolgende Leerzeichen fallen zusammen. Zeilenumbruch-Zeichen im Quellcode werden als andere Leerzeichen gehandhabt. Bricht Zeilen notwendigen Stellen um und füllt die Zeile.</dd>
 <dt><code>nowrap</code></dt>
 <dd>Wie <code>normal</code>, aber unterdrückt Zeilenumbrüche im Text.</dd>
 <dt><code>pre</code></dt>
 <dd>Aufeinanderfolgende Leerzeichen bleiben erhalten, Zeilen werden nur an Zeilenumbruch-Zeichen im Quellcode und an&nbsp; {{HTMLElement("br")}}-Elementen gebrochen.</dd>
 <dt><code>pre-wrap</code></dt>
 <dd>Aufeinanderfolgende Leerzeichen bleiben erhalten. Zeilen werden an Zeilenumbruch-Zeichen, an {{HTMLElement("br")}} und an notwendigen Stellen um die Zeile zu füllen umgebrochen.</dd>
 <dt><code>pre-line</code></dt>
 <dd>Aufeinanderfolgende Leerzeichen fallen zusammen. Zeilen werden an Zeilenumbruch-Zeichen, an {{HTMLElement("br")}} und an notwendigen Stellen um die Zeile zu füllen umgebrochen.</dd>
</dl>

<p>The following table summarizes the behavior of various <code>white-space</code> values:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th>&nbsp;</th>
   <th>Neue Zeilen</th>
   <th>Leerzeichen und Tabulatoren</th>
   <th>Textumbruch</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th><code>normal</code></th>
   <td>Fallen zusammen</td>
   <td>Fallen zusammen</td>
   <td>Umbruch</td>
  </tr>
  <tr>
   <th><code>nowrap</code></th>
   <td>Fallen zusammen</td>
   <td>Fallen zusammen</td>
   <td>Kein Umbruch</td>
  </tr>
  <tr>
   <th><code>pre</code></th>
   <td>Bleiben erhalten</td>
   <td>Preserve</td>
   <td>Kein Umbruch</td>
  </tr>
  <tr>
   <th><code>pre-wrap</code></th>
   <td>Bleiben erhalten</td>
   <td>Preserve</td>
   <td>Umbruch</td>
  </tr>
  <tr>
   <th><code>pre-line</code></th>
   <td>Bleiben erhalten</td>
   <td>Fallen zusammen</td>
   <td>Umbruch</td>
  </tr>
 </tbody>
</table>

<h3 id="Formale_Syntax">Formale Syntax</h3>

<pre class="syntaxbox">
{{csssyntax}}</pre>

<h2 id="Examples" name="Examples">Beispiele</h2>

<pre class="brush: css">
code { 
  white-space: pre; 
}</pre>

<h2 id="Specifications" name="Specifications">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Text', '#white-space', 'white-space')}}</td>
   <td>{{Spec2('CSS3 Text')}}</td>
   <td>Präzisiert den Umbruch-Algorithmus. Äußerlich bewirkt der <code>white-space</code> eine kompakte Eigenschaft.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Eigenschaft</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Grundlegende Unterstützung (<code>normal</code> und <code>nowrap</code>)</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>5.5 [*]</td>
   <td>4.0</td>
   <td>1.0 (85)</td>
  </tr>
  <tr>
   <td><code>pre</code></td>
   <td>1.0</td>
   <td>1.0</td>
   <td>6.0</td>
   <td>4.0</td>
   <td>1.0 (85)</td>
  </tr>
  <tr>
   <td><code>pre-wrap</code></td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}} — {{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}<br />
    {{CompatGeckoDesktop("1.9")}}</td>
   <td>8.0</td>
   <td>8.0</td>
   <td>3.0 (522)</td>
  </tr>
  <tr>
   <td><code>pre-line</code></td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>8.0</td>
   <td>9.5</td>
   <td>3.0 (522)</td>
  </tr>
 </tbody>
</table>
</div>

<p>[*] Internet Explorer 5.5+ supports {{Cssxref("word-wrap")}}<code>: break-word;</code><br />
 The following code allows line breaking inside<code> pre </code>elements:</p>

<pre class="brush: css">
pre {
  word-wrap: break-word;      /* IE 5.5-7 */
  white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
  white-space: pre-wrap;      /* current browsers */
}</pre>

<h2 id="See_also" name="See_also">Siehe auch</h2>

<ul>
 <li>{{CSS_Reference:Text()}}</li>
</ul>