---
title: word-wrap
slug: Web/CSS/overflow-wrap
tags:
  - CSS
  - CSS Eigenschaft
  - NeedsLiveSample
  - Referenz
translation_of: Web/CSS/overflow-wrap
original_slug: Web/CSS/word-wrap
---
<div>{{CSSRef}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Die <code>word-wrap</code> Eigenschaft wird verwendet, um anzugeben ob der Webbrowser Zeilenumbrüche innerhalb von Wörtern machen darf. Dies ist nötig um einem Overflow vorzubeugen, wenn ein sonst nicht trennbarer Text zu lang für die beinhaltende Box wäre.</p>

<div class="note"><strong>Hinweis:</strong> Die ursprünglich (unprefixed) proprietäre Erweiterung <code>word-wrap</code> von Microsoft wurde im aktuellen Entwurf der CSS3 Text Spezifikation in {{cssxref("overflow-wrap")}} umbenannt. <code>word-wrap</code> wird jetzt als "alternativer Name" für <code>overflow-wrap</code> angesehen. Stabile Builds von Google Chrome und Opera unterstützen die neue Syntax.</div>

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

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

<pre class="brush:css">/* Keyword values */
word-wrap: normal;
word-wrap: break-word;

/* Global values */
word-wrap: inherit;
word-wrap: initial;
word-wrap: unset;
</pre>

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

<dl>
 <dt><code>normal</code></dt>
 <dd>Zeilen dürfen nur bei normal Trennstellen von Wörtern umbrechen.</dd>
 <dt><code>break-word</code></dt>
 <dd>Normalerweise nicht trennbare Wörter dürfen an beliebigen Stellen getrennt werden, wenn es sonst keine anwendbaren Trennstellen in der Zeile gibt.</dd>
</dl>

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

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

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

<pre class="brush: css">p { width: 13em; background: gold; }</pre>

<p style="width: 13em; background: gold;">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p>

<pre class="brush: css">p { width: 13em; background: gold; word-wrap: break-word; }</pre>

<p style="word-wrap: break-word; width: 13em; background: gold;">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Bemerkung</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Text', '#propdef-word-wrap', 'word-wrap') }}</td>
   <td>{{ Spec2('CSS3 Text') }}</td>
   <td>Initiale Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Webbrowserkompatibilität">Webbrowserkompatibilität</h2>

{{Compat("css.properties.overflow-wrap")}}

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

<ul>
 <li>{{cssxref("word-break")}}</li>
</ul>