From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/white-space/index.html | 244 ++++++++++++++++++++++++++++++++ 1 file changed, 244 insertions(+) create mode 100644 files/de/web/css/white-space/index.html (limited to 'files/de/web/css/white-space') 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 +--- +
{{CSSRef}}
+ +

Die CSS Eigenschaft white-space wird benutzt, um Leerzeichen innerhalb eines Elementes zu handhaben.

+ +
{{EmbedInteractiveExample("pages/css/white-space.html")}}
+ + + +
+

Hinweis: Um Wörter umzubrechen, verwenden Sie stattdessen {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, oder {{CSSxRef("hyphens")}}.

+
+ +

Syntax

+ +
/* 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;
+
+ +

Die Eigenschaft white-space wird als ein einzelnes Schlüsselwort angegeben, das aus der untenstehenden Liste von Werten ausgewählt wird.

+ +

Werte

+ +
+
normal
+
Aufeinanderfolgende Leerzeichen fallen zusammen. Zeilenumbruch-Zeichen im Quellcode werden als andere Leerzeichen gehandhabt. Bricht Zeilen notwendigen Stellen um und füllt die Zeile.
+
nowrap
+
Wie normal, aber unterdrückt Zeilenumbrüche im Text.
+
pre
+
Aufeinanderfolgende Leerzeichen bleiben erhalten, Zeilen werden nur an Zeilenumbruch-Zeichen im Quellcode und an  {{HTMLElement("br")}}-Elementen gebrochen.
+
pre-wrap
+
Aufeinanderfolgende Zwischenraumzeichen bleiben erhalten. Zeilen werden an Zeilenumbruch-Zeichen, an {{HTMLElement("br")}} und an notwendigen Stellen um die Zeile zu füllen umgebrochen.
+
pre-line
+
Aufeinanderfolgende Zwischenraumzeichen fallen zusammen. Zeilen werden an Zeilenumbruch-Zeichen, an {{HTMLElement("br")}} und an notwendigen Stellen um die Zeile zu füllen umgebrochen.
+
break-spaces
+
 Das Verhalten ist bis auf eine Ausnahme identisch mit pre-line: +
    +
  • Jede Sequenz von erhaltenen Zwischenraumzeichen nimmt immer Platz ein, auch am Ende der Zeile.
    • +
  • Nach jedem enthaltenen Zwischenraumzeichen besteht die Möglichkeit eines Zeilenumbruchs, auch zwischen Zwischenraumzeichen.
    • +
  • Solche beibehaltenen Leerräume nehmen Platz in Anspruch und beeinflussen somit die intrinsischen Größen der Box (Min-Inhaltsgröße und Max-Inhaltsgröße).
    • +
+
+
+ +

Die folgende Tabelle fasst das Verhalten der verschiedenen white-space Zwischenraumzeichen zusammen:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Neue ZeilenLeerzeichen und TabulatorenTextumbruchZeilenende-Raum
normalFallen zusammenFallen zusammenUmbruchEntfernt
nowrapFallen zusammenFallen zusammenKein UmbruchEntfernt
preBleiben erhaltenBleiben erhaltenKein UmbruchEntfernt
pre-wrapBleiben erhaltenBleiben erhaltenUmbruchhängend
pre-lineBleiben erhaltenFallen zusammenUmbruchEntfernt
break-spaceBleiben erhaltenBleiben erhaltenUmbruchUmbruch
+ +

Formale Definition

+ +

{{CSSInfo}}

+ +

Formale Syntax

+ +
{{CSSSyntax}}
+ +

Beispiele

+ +

Einfaches Beispiel

+ +
code {
+  white-space: pre;
+}
+ +

Zeilenumbrüche innerhalb von <pre> Elementen

+ +
pre {
+  word-wrap: break-word;      /* IE 5.5-7 */
+  white-space: pre-wrap;      /* Modern browsers */
+}
+ +

In Aktion

+ +

HTML

+ + + +
<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>
+ +

Ergebnis

+ +

{{EmbedLiveSample("In_action", "100%", 500)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Text', '#white-space', 'white-space')}}{{Spec2('CSS3 Text')}}Präzisiert den Umbruch-Algorithmus. Äußerlich bewirkt der white-space eine kompakte Eigenschaft.
{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ + + +

{{Compat("css.properties.white-space")}}

+ +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf