diff options
author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-05 15:50:04 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-11-05 15:50:04 +0100 |
commit | 515cd9d5d43cdaef3c1260a1f49d2128fc508bde (patch) | |
tree | 6ef94b52cd005e36daa2a2f707344d4e238b7cd9 /files/fr | |
parent | 79843297a1d97045c504575ab9a6a29b3af8ffae (diff) | |
download | translated-content-515cd9d5d43cdaef3c1260a1f49d2128fc508bde.tar.gz translated-content-515cd9d5d43cdaef3c1260a1f49d2128fc508bde.tar.bz2 translated-content-515cd9d5d43cdaef3c1260a1f49d2128fc508bde.zip |
Fixes #2766 / updates vs en-US (#2776)
Diffstat (limited to 'files/fr')
-rw-r--r-- | files/fr/web/css/word-break/index.md | 61 |
1 files changed, 39 insertions, 22 deletions
diff --git a/files/fr/web/css/word-break/index.md b/files/fr/web/css/word-break/index.md index cb51291d36..b453cb6d1e 100644 --- a/files/fr/web/css/word-break/index.md +++ b/files/fr/web/css/word-break/index.md @@ -2,10 +2,11 @@ title: word-break slug: Web/CSS/word-break translation_of: Web/CSS/word-break +browser-compat: css.properties.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. +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")}} @@ -35,11 +36,15 @@ La propriété `word-break` est définie avec un mot-clé parmi ceux décrits ci - `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")}}. + - : Aura le même effet que `word-break: normal` et que `overflow-wrap: anywhere` quelle que soit la valeur de la propriété [`overflow-wrap`](/fr/docs/Web/CSS/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). +> **Note :** Contrairement à `word-break: break-word` et à `overflow-wrap: break-word` (cf. [`overflow-wrap`](/fr/docs/Web/CSS/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 +## Définition formelle + +{{CSSInfo}} + +## Syntaxe formelle {{csssyntax}} @@ -48,18 +53,33 @@ La propriété `word-break` est définie avec un mot-clé parmi ceux décrits ci ### 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> +<p>1. <code>word-break: normal</code></p> +<p class="normal étroit">This is a long and + Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu + グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> + +<p>2. <code>word-break: break-all</code></p> +<p class="breakAll étroit">This is a long and + Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu + グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> + +<p>3. <code>word-break: keep-all</code></p> +<p class="keepAll étroit">This is a long and + Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu + グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> + +<p>4. <code>word-break: break-word</code></p> +<p class="breakWord étroit">This is a long and + Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu + グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> ``` ### CSS ```css .étroit { - padding: 10px; - border: 1px solid; + padding: 10px; + border: 1px solid; width: 500px; margin: 0 auto; font-size: 20px; @@ -68,15 +88,15 @@ La propriété `word-break` est définie avec un mot-clé parmi ceux décrits ci } .normal { - word-break: normal; + word-break: normal; } .breakAll { - word-break: break-all; + word-break: break-all; } .keep { - word-break: keep-all; + word-break: keep-all; } .breakWord { @@ -86,21 +106,18 @@ La propriété `word-break` est définie avec un mot-clé parmi ceux décrits ci ### Résultat -{{EmbedLiveSample('Exemples','100%',600)}} +{{EmbedLiveSample('Exemples','100%',1100)}} ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- | -| {{SpecName('CSS3 Text', '#word-break-property', 'word-break')}} | {{Spec2('CSS3 Text')}} | Définition initiale | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.word-break")}} +{{Compat}} ## Voir aussi -- {{cssxref("word-wrap")}} -- {{cssxref("overflow-wrap")}} +- [`overflow-wrap`](/fr/docs/Web/CSS/overflow-wrap) +- [`hyphens`](/fr/docs/Web/CSS/hyphens) +- [Guide sur le retour à la ligne et la césure dans le texte](/fr/docs/Web/CSS/CSS_Text/Wrapping_text) |