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/white-space/index.md | 246 ++++++++++++++++------------------ 1 file changed, 116 insertions(+), 130 deletions(-) (limited to 'files/fr/web/css/white-space/index.md') diff --git a/files/fr/web/css/white-space/index.md b/files/fr/web/css/white-space/index.md index 7e6dd7ac48..095c82cbb8 100644 --- a/files/fr/web/css/white-space/index.md +++ b/files/fr/web/css/white-space/index.md @@ -7,19 +7,18 @@ tags: - Reference translation_of: Web/CSS/white-space --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété white-space est utilisée pour décrire la façon dont les blancs sont gérés au sein de l'élément.

+La propriété **`white-space`** est utilisée pour décrire la façon dont les blancs sont gérés au sein de l'élément. -
{{EmbedInteractiveExample("pages/css/white-space.html")}}
+{{EmbedInteractiveExample("pages/css/white-space.html")}} -
-

Note : Afin d'obtenir une césure au sein des mots, il faudra utiliser {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}} ou bien {{cssxref("hyphens")}}.

-
+> **Note :** Afin d'obtenir une césure au sein des mots, il faudra utiliser {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}} ou bien {{cssxref("hyphens")}}. -

Syntaxe

+## Syntaxe -
/* Avec un mot-clé */
+```css
+/* Avec un mot-clé */
 white-space: normal;
 white-space: nowrap;
 white-space: pre;
@@ -31,96 +30,95 @@ white-space: break-spaces;
 white-space: inherit;
 white-space: initial;
 white-space: unset;
-
+``` -

La propriété white-space se définit avec l'un des mots-clés suivants.

+La propriété `white-space` se définit avec l'un des mots-clés suivants. -

Valeurs

+### Valeurs -
-
break-spaces
-
Le comportement est identique à celui de pre-wrap mais chaque séquence de blancs continue d'occuper un espace, y compris en fin de ligne. Il y aura une opportunité de saut de ligne après chaque blanc. De tels espaces auront un impact sur les dimensions intrinsèques de la boîte (min-content et max-content).
-
normal
-
Les séries de blancs sont regroupées, les caractères de saut de ligne sont gérés comme les autres blancs. Les passages à la ligne sont faits naturellement pour remplir les boîtes.
-
nowrap
-
Les blancs sont regroupés comme avec normal mais les passages à la ligne automatiques sont supprimés.
-
pre
-
Les séries de blancs sont conservées telles quelles. Les sauts de ligne ont uniquement lieu avec les caractères de saut de ligne et avec les éléments {{HTMLElement("br")}}.
-
pre-wrap
-
Les séries de blancs sont conservées telles quelles. Les sauts de ligne ont lieu avec les caractères de saut de ligne, avec {{HTMLElement("br")}} et on a des passages à la ligne automatiques.
-
pre-line
-
Les séries de blancs sont regroupées, les sauts de lignes ont lieu avec les caractères de saut de ligne, les éléments {{HTMLElement("br")}} et on a des passages à la ligne automatiques.
-
+- `break-spaces` + - : Le comportement est identique à celui de `pre-wrap` mais chaque séquence de blancs continue d'occuper un espace, y compris en fin de ligne. Il y aura une opportunité de saut de ligne après chaque blanc. De tels espaces auront un impact sur les dimensions intrinsèques de la boîte (`min-content` et `max-content`). +- `normal` + - : Les séries de blancs sont regroupées, les caractères de saut de ligne sont gérés comme les autres blancs. Les passages à la ligne sont faits naturellement pour remplir les boîtes. +- `nowrap` + - : Les blancs sont regroupés comme avec `normal` mais les passages à la ligne automatiques sont supprimés. +- `pre` + - : Les séries de blancs sont conservées telles quelles. Les sauts de ligne ont uniquement lieu avec les caractères de saut de ligne et avec les éléments {{HTMLElement("br")}}. +- `pre-wrap` + - : Les séries de blancs sont conservées telles quelles. Les sauts de ligne ont lieu avec les caractères de saut de ligne, avec {{HTMLElement("br")}} et on a des passages à la ligne automatiques. +- `pre-line` + - : Les séries de blancs sont regroupées, les sauts de lignes ont lieu avec les caractères de saut de ligne, les éléments {{HTMLElement("br")}} et on a des passages à la ligne automatiques. -

Le tableau qui suit résume le comportement des différentes valeurs :

+Le tableau qui suit résume le comportement des différentes valeurs : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nouvelles lignesEspaces et tabulationsRetour à la ligne automatiqueEspaces en fin de ligne
normalRegroupéesRegroupésOuiRetirés
nowrapRegroupéesRegroupésNonRetirés
prePréservéesPréservésNonConservés
pre-wrapPréservéesPréservésOuiSuspendus
pre-linePréservéesRegroupésOuiRetirés
break-spacesPréservéesRegroupésOuiPassent à la ligne.
Nouvelles lignesEspaces et tabulationsRetour à la ligne automatiqueEspaces en fin de ligne
normalRegroupéesRegroupésOuiRetirés
nowrapRegroupéesRegroupésNonRetirés
prePréservéesPréservésNonConservés
pre-wrapPréservéesPréservésOuiSuspendus
pre-linePréservéesRegroupésOuiRetirés
break-spacesPréservéesRegroupésOuiPassent à la ligne.
-

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

Exemple simple

+### Exemple simple -

HTML

+#### HTML -
<code>
+```html
+
 var coucou = function(){
   // on notera l'indentation
   // avec deux espaces
@@ -132,73 +130,61 @@ var coucou = function(){
   }
   toto();
 }
-</code>
+ +``` -

CSS

+#### CSS -
code {
+```css
+code {
   white-space: pre;
-}
+} +``` -

Résultat

+#### Résultat -

{{EmbedLiveSample("Exemple_simple")}}

+{{EmbedLiveSample("Exemple_simple")}} -

Passage automatique à la ligne dans un élément pre

+### Passage automatique à la ligne dans un élément `pre` -

HTML

+#### HTML -
<pre>
+```html
+
 function jeNAuraisJamaisDuAppelerCetteFonctionAvecUnNomAussiLong(toto){
   console.log("Tout ça pour ça");
 }
-</pre>

+
+``` -

CSS

+#### CSS -
pre {
+```css
+pre {
   word-wrap: break-word;      /* IE 5.5-7 */
   white-space: pre-wrap;      /* current browsers */
-}
+} +``` -

Résultat

+#### Résultat -

{{EmbedLiveSample("Passage_automatique_à_la_ligne_dans_un_élément_pre")}}

+{{EmbedLiveSample("Passage_automatique_à_la_ligne_dans_un_élément_pre")}} -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text', '#propdef-white-space', 'white-space')}}{{Spec2('CSS3 Text')}}Définition de l'algorithme des césures de ligne et ajout de break-spaces.
{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}{{Spec2('CSS2.1')}}Définition initiale.
+| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------- | +| {{SpecName('CSS3 Text', '#propdef-white-space', 'white-space')}} | {{Spec2('CSS3 Text')}} | Définition de l'algorithme des césures de ligne et ajout de `break-spaces`. | +| {{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}} | {{Spec2('CSS2.1')}} | Définition initiale. | -

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -
{{Compat("css.properties.white-space")}}
+{{Compat("css.properties.white-space")}} -

Voir aussi

+## Voir aussi - +- {{cssxref("overflow-wrap")}} +- {{cssxref("word-break")}} +- {{cssxref("hyphens")}} -- cgit v1.2.3-54-g00ecf