word-wrap

  • Raccourci de la révision : CSS/word-wrap
  • Titre de la révision : word-wrap
  • ID de la révision : 355299
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

{{ SeeCompatTable() }}

Résumé

La propriété CSS word-wrap est utilisée pour définir si le navigateur peut ou non faire la césure à l'intérieur d'un mot pour éviter le dépassement d'une chaîne qui serait trop longue pour ne pas dépasser.

Note : bien qu'étant une extension propriétaire de Microsoft (sans-préfixe), la propriété word-wrap à été renommée en overflow-wrap dans les brouillons suivants de la spécification CSS3 Text, toutefois aucune implémentation n'a encore changé pour le nouveau nom à l'heure actuelle.
  • {{ Xref_cssinitial() }} {{ Cssxref("normal") }}
  • S'applique à tous les éléments
  • {{ Xref_cssinherited() }} oui
  • Média {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} comme spécifié

Syntaxe

word-wrap:  normal | break-word

Values

normal
Indique que la césure d'une ligne ne peux avoir lieu qu'aux positions de césures normales.
break-word
Indique que les mots qui ne subissent habituellement pas de césure peuvent l'être à n'importe quelle position s'il n'y a pas d'autres positions convenable dans la ligne.

Exemples

p { width:13em; background:gold; }

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

p { width:13em; background:gold; word-wrap:break-word; }

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

Spécifications

Spécification État Commentaire
CSS Text Level 3 {{ Spec2('CSS3 Text') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Firefox (Gecko) Chrome Internet Explorer Opera Safari
Support de base {{ CompatGeckoDesktop("1.9.1") }} 1.0 5.5 10.5 1.0
Fonction Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Support de base {{ CompatGeckoMobile("1.9.1") }} 1.0 {{ CompatUnknown() }} {{ CompatUnknown() }} 1.0
  • word-wrap:break-word peut être utilisé pour contourner le fait que IE 5.5 à 7 ne gèrent pas pre{white-space:pre-wrap}. Voir {{ Cssxref("white-space") }} pour un exemple.
  • IE8 à introduit -ms-word-wrap comme synonyme de word-wrap. N'utilisez pas le préfixe -ms-.

Voir également

Source de la révision

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>word-wrap</code> est utilisée pour définir si le navigateur peut ou non faire la césure à l'intérieur d'un mot pour éviter le dépassement d'une chaîne qui serait trop longue pour ne pas dépasser.</p>
<div class="note">
  <strong>Note :</strong> bien qu'étant une extension propriétaire de Microsoft (sans-préfixe), la propriété <code>word-wrap</code> à été renommée en <code>overflow-wrap</code> dans les brouillons suivants de la spécification CSS3 Text, toutefois aucune implémentation n'a encore changé pour le nouveau nom à l'heure actuelle.</div>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }} </dfn> {{ Cssxref("normal") }}</li>
  <li><dfn>S'applique à </dfn>tous les éléments</li>
  <li><dfn>{{ Xref_cssinherited() }} </dfn>oui</li>
  <li><dfn>Média </dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }} </dfn> comme spécifié</li>
</ul>
<h2 id="Syntaxe">Syntaxe</h2>
<pre>
word-wrap:  normal | break-word
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <code>normal</code></dt>
  <dd>
    Indique que la césure d'une ligne ne peux avoir lieu qu'aux positions de césures normales.</dd>
  <dt>
    <code>break-word</code></dt>
  <dd>
    Indique que les mots qui ne subissent habituellement pas de césure peuvent l'être à n'importe quelle position s'il n'y a pas d'autres positions convenable dans la ligne.</dd>
</dl>
<h2 id="Exemples">Exemples</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="Sp.C3.A9cifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">État</th>
      <th scope="col">Commentaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a class="external" href="http://dev.w3.org/csswg/css3-text/#overflow-wrap" title="http://dev.w3.org/csswg/css3-text/#overflow-wrap">CSS Text Level 3</a></td>
      <td>{{ Spec2('CSS3 Text') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Firefox (Gecko)</th>
        <th>Chrome</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
        <td>1.0</td>
        <td>5.5</td>
        <td>10.5</td>
        <td>1.0</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>Android</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{ CompatGeckoMobile("1.9.1") }}</td>
        <td>1.0</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>1.0</td>
      </tr>
    </tbody>
  </table>
</div>
<ul>
  <li><code>word-wrap:break-word </code>peut être utilisé pour contourner le fait que IE 5.5 à 7 ne gèrent pas <code>pre{white-space:pre-wrap}.</code> Voir {{ Cssxref("white-space") }} pour un exemple.</li>
  <li>IE8 à introduit<code> -ms-word-wrap </code>comme synonyme de<code> word-wrap</code>. N'utilisez pas le préfixe <code>-ms-</code>.</li>
</ul>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
  <li>Propriétés CSS liées au texte : {{ CSS_Reference:Text() }}</li>
  <li>La documentation originale de Microsoft : <a class="external" href="http://msdn.microsoft.com/en-us/library/ms531186(VS.85,loband).aspx" title="http://msdn.microsoft.com/en-us/library/ms531186(VS.85,loband).aspx">MSDN Microsoft library word-wrap (en)</a><br />
    <p>&nbsp;</p>
  </li>
</ul>
Revenir à cette révision