blob: cb51291d36ed5b700ac6e2ce88c8e2aeedfe3f12 (
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
|
---
title: word-break
slug: Web/CSS/word-break
translation_of: Web/CSS/word-break
---
{{CSSRef}}
La propriété** `word-break`** 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.
{{EmbedInteractiveExample("pages/css/word-break.html")}}
## Syntaxe
```css
/* 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;
```
La propriété `word-break` est définie avec un mot-clé parmi ceux décrits ci-après.
### Valeurs
- `normal`
- : Le passage à la ligne classique est utilisé.
- `break-all`
- : 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).
- `keep-all`
- : 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 `normal`.
- `break-word`{{deprecated_inline}}
- : Aura le même effet que `word-break: normal` et que `overflow-wrap: anywhere` quelle que soit la valeur de la propriété {{cssxref("overflow-wrap")}}.
> **Note :** Contrairement à `word-break: break-word` et à `overflow-wrap: break-word` (cf. {{cssxref("overflow-wrap")}}), `word-break: break-all` 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).
### Syntaxe formelle
{{csssyntax}}
## Exemples
### HTML
```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>
```
### CSS
```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;
}
```
### Résultat
{{EmbedLiveSample('Exemples','100%',600)}}
## Spécifications
| Spécification | État | Commentaires |
| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- |
| {{SpecName('CSS3 Text', '#word-break-property', 'word-break')}} | {{Spec2('CSS3 Text')}} | Définition initiale |
{{cssinfo}}
## Compatibilité des navigateurs
{{Compat("css.properties.word-break")}}
## Voir aussi
- {{cssxref("word-wrap")}}
- {{cssxref("overflow-wrap")}}
|
