blob: 36f25e5028672a8aabe9d0932f4222e874ac0d8d (
plain)
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
|
---
title: word-break
slug: Web/CSS/word-break
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/word-break
---
<div>{{CSSRef}}</div>
<p>La propriété<strong> <code>word-break</code></strong> est utilisée pour définir la façon dont la césure s'applique pour les endroits où le texte dépasserait de sa boîte de contenu.</p>
<div>{{EmbedInteractiveExample("pages/css/word-break.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>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* dépréciée */
/* Valeurs globales */
word-break: inherit;
word-break: initial;
word-break: unset;
</pre>
<p>La propriété <code>word-break</code> est définie avec un mot-clé parmi ceux décrits ci-après.</p>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>normal</code></dt>
<dd>Le passage à la ligne classique est utilisé.</dd>
<dt><code>break-all</code></dt>
<dd>La césure peut être insérée après n'importe quel caractère (ne s'applique pas pour les textes en chinois, japonais et coréen).</dd>
<dt><code>keep-all</code></dt>
<dd>La césure est interdite pour les textes en chinois, japonais et coréen. Pour les autres types de texte, le comportement est le même que <code>normal</code>.</dd>
<dt><code>break-word</code>{{deprecated_inline}}</dt>
<dd>Aura le même effet que <code>word-break: normal</code> et que <code>overflow-wrap: anywhere</code> quelle que soit la valeur de la propriété {{cssxref("overflow-wrap")}}.</dd>
</dl>
<div class="note">
<p><strong>Note :</strong> Contrairement à <code>word-break: break-word</code> et à <code>overflow-wrap: break-word</code> (cf. {{cssxref("overflow-wrap")}}), <code>word-break: break-all</code> créera une césure à l'endroit exact où le mot aurait dépassé du conteneur (même si placer le mot entier sur sa propre ligne aurait pu éviter la césure).</p>
</div>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemples">Exemples</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p class="normal étroit"> Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase. グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 </p>
<p class="breakAll étroit"> Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase. グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 </p>
<p class="breakWord étroit"> Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase. グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 </p>
<p class="keep étroit"> Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase. グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">.étroit {
padding: 10px;
border: 1px solid;
width: 500px;
margin: 0 auto;
font-size: 20px;
line-height: 1.5;
letter-spacing: 1px;
}
.normal {
word-break: normal;
}
.breakAll {
word-break: break-all;
}
.keep {
word-break: keep-all;
}
.breakWord {
word-break: break-word;
}
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Exemple','100%',600)}}</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', '#word-break-property', 'word-break')}}</td>
<td>{{Spec2('CSS3 Text')}}</td>
<td>Définition initiale</td>
</tr>
</tbody>
</table>
<div>{{cssinfo}}</div>
<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.word-break")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("word-wrap")}}</li>
<li>{{cssxref("overflow-wrap")}}</li>
</ul>
|
