diff options
Diffstat (limited to 'files/de/web/css/white-space/index.html')
| -rw-r--r-- | files/de/web/css/white-space/index.html | 244 |
1 files changed, 244 insertions, 0 deletions
diff --git a/files/de/web/css/white-space/index.html b/files/de/web/css/white-space/index.html new file mode 100644 index 0000000000..5bd5f70eae --- /dev/null +++ b/files/de/web/css/white-space/index.html @@ -0,0 +1,244 @@ +--- +title: white-space +slug: Web/CSS/white-space +tags: + - CSS + - CSS Eigenschaft + - CSS Text + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/white-space +--- +<div>{{CSSRef}}</div> + +<p>Die CSS Eigenschaft <strong><code>white-space</code></strong> wird benutzt, um Leerzeichen innerhalb eines Elementes zu handhaben.</p> + +<div>{{EmbedInteractiveExample("pages/css/white-space.html")}}</div> + +<div class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</div> + +<div class="note"> +<p><strong>Hinweis:</strong> Um Wörter umzubrechen, verwenden Sie stattdessen {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, oder {{CSSxRef("hyphens")}}.</p> +</div> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush: css notranslate">/* Schlüsselwortwerte */ +white-space: normal; +white-space: nowrap; +white-space: pre; +white-space: pre-wrap; +white-space: pre-line; +white-space: break-spaces; + +/* Globale Werte */ +white-space: inherit; +white-space: initial; +white-space: unset; +</pre> + +<p>Die Eigenschaft <code>white-space</code> wird als ein einzelnes Schlüsselwort angegeben, das aus der untenstehenden Liste von Werten ausgewählt wird.</p> + +<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 {{HTMLElement("br")}}-Elementen gebrochen.</dd> + <dt><code>pre-wrap</code></dt> + <dd>Aufeinanderfolgende Zwischenraumzeichen 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 Zwischenraumzeichen fallen zusammen. Zeilen werden an Zeilenumbruch-Zeichen, an {{HTMLElement("br")}} und an notwendigen Stellen um die Zeile zu füllen umgebrochen.</dd> + <dt><code>break-spaces</code></dt> + <dd> Das Verhalten ist bis auf eine Ausnahme identisch mit <code>pre-line</code>: + <ul> + <li>Jede Sequenz von erhaltenen Zwischenraumzeichen nimmt immer Platz ein, auch am Ende der Zeile.</li> + <li>Nach jedem enthaltenen Zwischenraumzeichen besteht die Möglichkeit eines Zeilenumbruchs, auch zwischen Zwischenraumzeichen.</li> + <li>Solche beibehaltenen Leerräume nehmen Platz in Anspruch und beeinflussen somit die intrinsischen Größen der Box (Min-Inhaltsgröße und Max-Inhaltsgröße).</li> + </ul> + </dd> +</dl> + +<p>Die folgende Tabelle fasst das Verhalten der verschiedenen <code>white-space</code> Zwischenraumzeichen zusammen:</p> + +<table class="standard-table"> + <thead> + <tr> + <th></th> + <th>Neue Zeilen</th> + <th>Leerzeichen und Tabulatoren</th> + <th>Textumbruch</th> + <th>Zeilenende-Raum</th> + </tr> + </thead> + <tbody> + <tr> + <th><code>normal</code></th> + <td>Fallen zusammen</td> + <td>Fallen zusammen</td> + <td>Umbruch</td> + <td>Entfernt</td> + </tr> + <tr> + <th><code>nowrap</code></th> + <td>Fallen zusammen</td> + <td>Fallen zusammen</td> + <td>Kein Umbruch</td> + <td>Entfernt</td> + </tr> + <tr> + <th><code>pre</code></th> + <td>Bleiben erhalten</td> + <td>Bleiben erhalten</td> + <td>Kein Umbruch</td> + <td>Entfernt</td> + </tr> + <tr> + <th><code>pre-wrap</code></th> + <td>Bleiben erhalten</td> + <td>Bleiben erhalten</td> + <td>Umbruch</td> + <td>hängend</td> + </tr> + <tr> + <th><code>pre-line</code></th> + <td>Bleiben erhalten</td> + <td>Fallen zusammen</td> + <td>Umbruch</td> + <td>Entfernt</td> + </tr> + <tr> + <th><code>break-space</code></th> + <td>Bleiben erhalten</td> + <td>Bleiben erhalten</td> + <td>Umbruch</td> + <td>Umbruch</td> + </tr> + </tbody> +</table> + +<h2 id="Formale_Definition">Formale Definition</h2> + +<p>{{CSSInfo}}</p> + +<h2 id="Formale_Syntax">Formale Syntax</h2> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3> + +<pre class="brush: css notranslate">code { + white-space: pre; +}</pre> + +<h3 id="Line_breaks_inside_pre_elements" name="Line_breaks_inside_pre_elements">Zeilenumbrüche innerhalb von <pre> Elementen</h3> + +<pre class="brush: css notranslate">pre { + word-wrap: break-word; /* IE 5.5-7 */ + white-space: pre-wrap; /* Modern browsers */ +}</pre> + +<h3 id="In_Aktion">In Aktion</h3> + +<h4 id="HTML">HTML</h4> + +<div class="hidden" id="In_action"> +<pre class="brush: html notranslate"><div id="css-code" class="box"> + p { white-space: + <select> + <option>normal</option> + <option>nowrap</option> + <option>pre</option> + <option>pre-wrap</option> + <option>pre-line</option> + <option>break-spaces</option> + </select> } +</div> +<div id="results" class="box"> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> +</div></pre> + +<pre class="brush: css notranslate">.box { + width: 300px; + padding: 16px; + border-radius: 10px; +} + +#css-code { + background-color: rgb(220, 220, 220); + font-size: 16px; + font-family: monospace; +} + +#css-code select { + font-family: inherit; +} + +#results { + background-color: rgb(230, 230, 230); + overflow-x: scroll; + height: 400px; + white-space: normal; + font-size: 14px; +}</pre> + +<pre class="brush: js notranslate">var select = document.querySelector("#css-code select"); +var results = document.querySelector("#results p"); +select.addEventListener("change", function(e) { + results.setAttribute("style", "white-space: "+e.target.value); +})</pre> +</div> + +<pre class="brush: html notranslate"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample("In_action", "100%", 500)}}</p> + +<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> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div> + +<p>{{Compat("css.properties.white-space")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Eigenschaften, die definieren, wie Wörter umgebrochen werden: {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}}</li> +</ul> |