From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/overflow-wrap/index.md | 178 +++++++++++++++----------------- 1 file changed, 81 insertions(+), 97 deletions(-) (limited to 'files/fr/web/css/overflow-wrap') diff --git a/files/fr/web/css/overflow-wrap/index.md b/files/fr/web/css/overflow-wrap/index.md index af17d340b6..3339efb978 100644 --- a/files/fr/web/css/overflow-wrap/index.md +++ b/files/fr/web/css/overflow-wrap/index.md @@ -7,21 +7,20 @@ tags: - Reference translation_of: Web/CSS/overflow-wrap --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété overflow-wrap s'applique aux éléments en ligne (inline) 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.

+La propriété **`overflow-wrap`** s'applique aux éléments en ligne (_inline_) 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. -
{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}
+{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}} -
-

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

-
+> **Note :** À la différence de {{cssxref("word-break")}}, `overflow-wrap` créera uniquement un saut de ligne si un mot entier ne peut pas être placé sur sa propre ligne sans dépasser. -

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

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

Syntaxe

+## Syntaxe -
/* Avec un mot-clé */
+```css
+/* Avec un mot-clé */
 overflow-wrap: normal;
 overflow-wrap: break-word;
 overflow-wrap: anywhere;
@@ -30,30 +29,29 @@ overflow-wrap: anywhere;
 overflow-wrap: inherit;
 overflow-wrap: initial;
 overflow-wrap: unset;
-
+``` -

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

+La propriété `overflow-wrap` peut être définie avec l'un des mots-clés suivants. -

Valeurs

+### Valeurs -
-
normal
-
Indique que la césure d'une ligne ne peut avoir lieu qu'aux positions de césures normales.
-
anywhere
-
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 min-content intrinsèques.
-
break-word
-
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 ne sont pas prises en compte lors du calcul des tailles min-content intrinsèques.
-
+- `normal` + - : Indique que la césure d'une ligne ne peut avoir lieu qu'aux positions de césures normales. +- `anywhere` + - : 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 `min-content` intrinsèques. +- `break-word` + - : 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 **ne sont pas** prises en compte lors du calcul des tailles `min-content` intrinsèques. -

Syntaxe formelle

+### Syntaxe formelle -

{{csssyntax}}

+{{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
p {
+```css
+p {
   width: 13em;
   margin: 2px;
   background: gold;
@@ -72,77 +70,63 @@ overflow-wrap: unset;
 }
 
 .hyphens {
-  -webkit-hyphens: auto;
+  -webkit-hyphens: auto;
   -ms-hyphens: auto;
-  hyphens: auto;
+  hyphens: auto;
 }
-
- -

HTML

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

Résultat

- -

{{EmbedLiveSample("Exemples", '100%', 520)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text', '#propdef-overflow-wrap', 'overflow-wrap')}}{{Spec2('CSS3 Text')}}Définition initiale
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.overflow-wrap")}}

- -

Voir aussi

- - +``` + +### HTML + +```html +

normal

+

They say the fishing is excellent at + Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, + though I've never been there myself.

+

overflow-wrap: anywhere

+

They say the fishing is excellent at + Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, + though I've never been there myself.

+

overflow-wrap: break-word

+

They say the fishing is excellent at + Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, + though I've never been there myself.

+

word-break: break-all

+

They say the fishing is excellent at + Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, + though I've never been there myself.

+

hyphens: auto, without lang attribute

+

They say the fishing is excellent at + Lake Chargoggagoggmanchauggagoggchaubunagungamaugg + though I've never been there myself.

+

hyphens: auto, English rules

+

They say the fishing is excellent at + Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, + though I've never been there myself.

+

hyphens: auto, German rules

+

They say the fishing is excellent at + Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, + though I've never been there myself.

+``` + +### Résultat + +{{EmbedLiveSample("Exemples", '100%', 520)}} + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | +| {{SpecName('CSS3 Text', '#propdef-overflow-wrap', 'overflow-wrap')}} | {{Spec2('CSS3 Text')}} | Définition initiale | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.overflow-wrap")}} + +## Voir aussi + +- {{cssxref("word-break")}} +- {{cssxref("hyphens")}} +- {{cssxref("text-overflow")}} -- cgit v1.2.3-54-g00ecf