files/fr/web/css/overflow-wrap/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

---
title: overflow-wrap
slug: Web/CSS/overflow-wrap
tags:
  - CSS
  - Propriété
  - Reference
translation_of: Web/CSS/overflow-wrap
---
<div>{{CSSRef}}</div>

<p>La propriété <strong><code>overflow-wrap</code></strong> s'applique aux éléments en ligne (<em>inline</em>) et est utilisée afin de 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 afin qu'elle ne dépasse pas de la boîte.</p>

<div>{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}</div>

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<div class="note">
<p><strong>Note :</strong> À la différence de {{cssxref("word-break")}}, <code>overflow-wrap</code> créera uniquement un saut de ligne si un mot entier ne peut pas être placé sur sa propre ligne sans dépasser.</p>
</div>

<p>À l'origine, cette propriété était une extension non-standard sans préfixe de Microsoft et intitulée <code>word-wrap</code>. Implémentée sous ce nom par la plupart des navigateurs depuis, elle a été renommée en <code>overflow-wrap</code> et <code>word-wrap</code> est devenu un alias.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

/* Valeurs globales */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;
</pre>

<p>La propriété <code>overflow-wrap</code> peut être définie avec l'un des mots-clés suivants.</p>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>normal</code></dt>
 <dd>Indique que la césure d'une ligne ne peut avoir lieu qu'aux positions de césures normales.</dd>
 <dt><code>anywhere</code></dt>
 <dd>Indique que la césure pourra avoir lieu afin d'éviter le dépassement, y compris s'il n'y a pas de point de césure acceptable sur la ligne. Cela est notamment utile pour éviter le dépassement et qu'on a une longue ligne (un long mot ou une URL). Aucun caractère ne sera ajouté au point de césure. Les possibilités de rupture douces ajoutées par la césure sont prises en compte lors du calcul des tailles <code>min-content</code> intrinsèques.</dd>
 <dt><code>break-word</code></dt>
 <dd>Indique que les mots qui ne subissent habituellement pas de césure peuvent être scindés à n'importe quelle position s'il n'y a pas d'autres positions envisageables pour la césure de la ligne. Les possibilités de rupture douces ajoutées par la césure <strong>ne sont pas</strong> prises en compte lors du calcul des tailles <code>min-content</code> intrinsèques.</dd>
 <dt>
 <h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

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

<h2 id="Exemples">Exemples</h2>

<h3 id="CSS">CSS</h3>

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

.ow-anywhere {
  overflow-wrap: anywhere;
}

.ow-break-word {
  overflow-wrap: break-word;
}

.word-break {
  word-break: break-all;
}

.hyphens {
<code>  -webkit-hyphens: auto;
  -ms-hyphens: auto;
</code>  hyphens: auto;
}
</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;h3&gt;&lt;code&gt;normal&lt;/code&gt;&lt;/h3&gt;
&lt;p&gt;They say the fishing is excellent at
  Lake &lt;em class="normal"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
  though I've never been there myself.&lt;/p&gt;
&lt;h3&gt;&lt;code&gt;overflow-wrap: anywhere&lt;/code&gt;&lt;/h3&gt;
&lt;p&gt;They say the fishing is excellent at
  Lake &lt;em class="ow-anywhere"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
  though I've never been there myself.&lt;/p&gt;
&lt;h3&gt;&lt;code&gt;overflow-wrap: break-word&lt;/code&gt;&lt;/h3&gt;
&lt;p&gt;They say the fishing is excellent at
  Lake &lt;em class="ow-break-word"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
  though I've never been there myself. &lt;/p&gt;
&lt;h3&gt;&lt;code&gt;word-break: break-all&lt;/code&gt;&lt;/h3&gt;
&lt;p&gt;They say the fishing is excellent at
  Lake &lt;em class="word-break"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
  though I've never been there myself.&lt;/p&gt;
&lt;h3&gt;&lt;code&gt;hyphens: auto&lt;/code&gt;, without &lt;code&gt;lang&lt;/code&gt; attribute&lt;/h3&gt;
&lt;p class="hyphens"&gt;They say the fishing is excellent at
  Lake &lt;em&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;
  though I've never been there myself. &lt;/p&gt;
&lt;h3&gt;&lt;code&gt;hyphens: auto&lt;/code&gt;, English rules&lt;/h3&gt;
&lt;p class="hyphens" lang="en"&gt;They say the fishing is excellent at
  Lake &lt;em&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
  though I've never been there myself.&lt;/p&gt;
&lt;h3&gt;&lt;code&gt;hyphens: auto&lt;/code&gt;, German rules&lt;/h3&gt;
&lt;p class="hyphens" lang="de"&gt;They say the fishing is excellent at
  Lake &lt;em&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
  though I've never been there myself.&lt;/p&gt;
</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample("Exemples", '100%', 520)}}</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Text', '#propdef-overflow-wrap', 'overflow-wrap')}}</td>
   <td>{{Spec2('CSS3 Text')}}</td>
   <td>Définition initiale</td>
  </tr>
 </tbody>
</table>

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

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>

<p>{{Compat("css.properties.overflow-wrap")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

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