diff options
Diffstat (limited to 'files/fr/web/css/text-overflow/index.html')
| -rw-r--r-- | files/fr/web/css/text-overflow/index.html | 311 |
1 files changed, 112 insertions, 199 deletions
diff --git a/files/fr/web/css/text-overflow/index.html b/files/fr/web/css/text-overflow/index.html index e9d59099d9..7e1716ebd2 100644 --- a/files/fr/web/css/text-overflow/index.html +++ b/files/fr/web/css/text-overflow/index.html @@ -9,15 +9,13 @@ translation_of: Web/CSS/text-overflow --- <div>{{CSSRef}}</div> -<p>La propriété <strong><code>text-overflow</code></strong> définit la façon dont le contenu textuel qui dépasse d'une boîte est signalé pour les utilisateurs. Le texte peut être rogné (<em>clipping</em>), afficher une ellipse ('<code>…</code>', <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) ou afficher une chaîne de caractères choisie.</p> +<p>La propriété <strong><code>text-overflow</code></strong> définit la façon dont le contenu textuel qui dépasse d'une boîte est signalé pour les utilisateurs. Le texte peut être rogné (<em>clipping</em>), afficher une ellipse ('<code>…</code>', <code>U+2026 Horizontal Ellipsis</code>) ou afficher une chaîne de caractères choisie.</p> <div>{{EmbedInteractiveExample("pages/css/text-overflow.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> - <p>Le rognage se fera à la bordure de la boîte. Afin que le rognage se fasse plus tôt, à la limite des caractères, on peut utiliser la chaîne vide (<code>''</code>).</p> -<p>Cette propriété n'affecte que le contenu qui dépasse de la boîte englobante dans le sens de la progression en ligne. Par exemple, on ne parle pas ici du texte qui dépasserait vers le bas d'une boîte. Le texte peut dépasser lorsqu'on empêche le retour automatique à la ligne (par exemple avec <code class="css">white-space: nowrap</code>) ou lorsqu'un seul mot est trop long pour tenir dans le conteneur.</p> +<p>Cette propriété n'affecte que le contenu qui dépasse de la boîte englobante dans le sens de la progression en ligne. Par exemple, on ne parle pas ici du texte qui dépasserait vers le bas d'une boîte. Le texte peut dépasser lorsqu'on empêche le retour automatique à la ligne (par exemple avec <code>white-space: nowrap</code>) ou lorsqu'un seul mot est trop long pour tenir dans le conteneur.</p> <p>Cette propriété CSS ne force pas le dépassement. Pour ce faire et afin que <code>text-overflow</code> soit appliqué, l'auteur devra ajouter des propriétés supplémentaires sur l'élément, notamment : {{cssxref("overflow")}} avec <code>hidden</code> et {{cssxref("white-space")}} avec <code>nowrap</code>.</p> @@ -63,17 +61,17 @@ text-overflow: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="clip" name="clip"><code>clip</code></a></dt> - <dd>La valeur par défaut de cette propriété. Ce mot-clé indique qu'on tronque le texte à la limite de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de contenu</a>. La troncature peut donc arriver sur le milieu d'un caractère. Pour que celle-ci soit appliquée entre deux caractères, on devra utiliser la chaîne vide (<code>''</code>) comme valeur pour cette propriété.</dd> - <dt><a id="ellipsis" name="ellipsis"><code>ellipsis</code></a></dt> - <dd>Ce mot-clé indique qu'on affiche une ellipse (<code>'…'</code>, <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) pour représenter le texte rogné. L'ellipse est affichée à l'intérieur de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de contenu</a> et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher l'ellipse, celle-ci est rognée.</dd> - <dt><a id="fade" name="fade"><code>fade</code></a> {{experimental_inline}}</dt> + <dt><code>clip</code></dt> + <dd>La valeur par défaut de cette propriété. Ce mot-clé indique qu'on tronque le texte à la limite de <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">la boîte de contenu</a>. La troncature peut donc arriver sur le milieu d'un caractère. Pour que celle-ci soit appliquée entre deux caractères, on devra utiliser la chaîne vide (<code>''</code>) comme valeur pour cette propriété.</dd> + <dt><code>ellipsis</code></dt> + <dd>Ce mot-clé indique qu'on affiche une ellipse (<code>'…'</code>, <code>U+2026 Horizontal Ellipsis</code>) pour représenter le texte rogné. L'ellipse est affichée à l'intérieur de <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">la boîte de contenu</a> et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher l'ellipse, celle-ci est rognée.</dd> + <dt><code>fade</code> {{experimental_inline}}</dt> <dd>Ce mot-clé indique que le contenu qui dépasse est rogné avec un effet de dégradé en transparence. Au bout de la boîte, le contenu est totalement transparent.</dd> - <dt><a id="fade_fun" name="fade_fun"><code>fade( <length> | <percentage> )</code></a> {{experimental_inline}}</dt> + <dt><code>fade( <length> | <percentage> )</code> {{experimental_inline}}</dt> <dd>Cette fonction permet de rogner le contenu qui dépasse et d'appliquer un effet de dégradé en transparence. Au bout de la boîte, on a une transparence totale.<br> L'argument passé à la fonction détermine la distance sur laquelle cet effet est appliqué. La valeur en pourcentage est relative à la largeur de la boîte. Les valeurs inférieures à <code>0</code> sont ramenées à <code>0</code>. Les valeurs supérieures à la largeur de la boîte sont écrétées à la largeur de la boîte.</dd> - <dt><a id="string" name="string"><code><string></code></a> {{experimental_inline}}</dt> - <dd>Une chaîne de caractères (type {{cssxref("<string>")}}) utilisée pour représentée le texte rogné. La chaîne est affichée à l'intérieur de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de contenu</a> et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher la chaîne choisie, celle-ci est rognée.</dd> + <dt><code><string></code> {{experimental_inline}}</dt> + <dd>Une chaîne de caractères (type {{cssxref("<string>")}}) utilisée pour représentée le texte rogné. La chaîne est affichée à l'intérieur de <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">la boîte de contenu</a> et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher la chaîne choisie, celle-ci est rognée.</dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -82,22 +80,49 @@ text-overflow: unset; <h2 id="Exemples">Exemples</h2> -<h3 id="CSS">CSS</h3> +<h2 id="Examples">Examples</h2> + +<h3 id="one-value_syntax">Syntaxe avec une valeur</h3> + +<p>Cet exemple illustre différentes valeurs pour <code>text-overflow</code>, appliquée à un paragraphe, pour des textes écrits de gauche à droite et de droite à gauche.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"> + +<div class="ltr"> + <h2>Left to right text</h2> + <pre>clip</pre> + <p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + <pre>ellipsis</pre> + <p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + <pre>" [..]"</pre> + <p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +</div> + +<div class="rtl"> + <h2>Right to left text</h2> + <pre>clip</pre> + <p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + <pre>ellipsis</pre> + <p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + <pre>" [..]"</pre> + <p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +</div> +</pre> + +<h4 id="CSS">CSS</h4> <pre class="brush: css">p { width: 200px; border: 1px solid; padding: 2px 5px; - /* Nécessaires pour text-overflow */ + /* Les deux règles suivantes sont nécessaires pour text-overflow */ white-space: nowrap; overflow: hidden; } -.overflow-visible { - white-space: initial; -} - .overflow-clip { text-overflow: clip; } @@ -107,199 +132,87 @@ text-overflow: unset; } .overflow-string { - /* Cette forme n'est pas prise en charge - par la plupart des navigateurs. cf. la - section Compatibilité ci-après */ text-overflow: " [..]"; } + +body { + display: flex; + justify-content: space-around; +} + +.ltr > p { + direction: ltr; +} + +.rtl > p { + direction: rtl; +} </pre> -<h3 id="HTML">HTML</h3> +<h4 id="result">Résultat</h4> + +<p>{{EmbedLiveSample('one-value_syntax', 600, 320)}}</p> -<pre class="brush: html"><p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<h3 id="two-value_syntax">Syntaxe avec deux valeurs</h3> -<p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<p>Cette exemple illustre la syntaxe à deux valeurs pour <code>text-overflow</code>, où on peut définir un comportement de débordement différent pour le début et la fin du texte. Pour illustrer l'effet, on doit faire défiler la ligne et le début de la ligne est donc caché.</p> -<p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<h4 id="HTML">HTML</h4> -<p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<pre class="brush: html"> +<pre>clip clip</pre> +<p class="overflow-clip-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<pre>clip ellipsis</pre> +<p class="overflow-clip-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<pre>ellipsis ellipsis</pre> +<p class="overflow-ellipsis-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<pre>ellipsis " [..]"</pre> +<p class="overflow-ellipsis-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </pre> -<h3 id="Résultat">Résultat</h3> +<h4 id="CSS">CSS</h4> -<p>{{EmbedLiveSample('Exemples', 300, 220, '', 'Web/CSS/text-overflow')}}</p> +<pre class="brush: css">p { + width: 200px; + border: 1px solid; + padding: 2px 5px; -<table class="standard-table"> - <thead> - <tr> - <th colspan="1" rowspan="2" scope="col">Valeur CSS</th> - <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: ltr</code></th> - <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: rtl</code></th> - </tr> - <tr> - <th scope="col">Résultat attendu</th> - <th scope="col">Résultat du navigateur</th> - <th scope="col">Résultat attendu</th> - <th scope="col">Résultat du navigateur</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>overflow:visible</code></td> - <td style="font-family: monospace;">1234567890</td> - <td style="direction: ltr;"> - <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">0987654321</td> - <td> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: clip</code></td> - <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip.png" class="default internal" src="/@api/deki/files/6056/=t-o_clip.png"></td> - <td style="direction: ltr;"> - <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;">123456</div> - </td> - <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip_rtl.png" class="default internal" src="/@api/deki/files/6057/=t-o_clip_rtl.png"></td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ''</code></td> - <td style="font-family: monospace;">12345</td> - <td style="direction: ltr;"> - <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '';">123456</div> - </td> - <td style="font-family: monospace;">54321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ellipsis</code></td> - <td style="font-family: monospace;">1234…</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">…4321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: '.'</code></td> - <td style="font-family: monospace;">1234.</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">.4321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: clip clip</code></td> - <td style="font-family: monospace;">123456</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">654321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: clip ellipsis</code></td> - <td style="font-family: monospace;">1234…</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">6543…</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: clip '.'</code></td> - <td style="font-family: monospace;">1234.</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">6543.</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ellipsis clip</code></td> - <td style="font-family: monospace;">…3456</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">…4321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ellipsis ellipsis</code></td> - <td style="font-family: monospace;">…34…</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">…43…</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ellipsis '.'</code></td> - <td style="font-family: monospace;">…34.</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">…43.</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ',' clip</code></td> - <td style="font-family: monospace;">,3456</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">,4321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ',' ellipsis</code></td> - <td style="font-family: monospace;">,34…</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ','ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">,43…</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ','ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ',' '.'</code></td> - <td style="font-family: monospace;">,34.</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">,43.</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - </tbody> -</table> + /* Les deux règles suivantes sont nécessaires pour text-overflow */ + white-space: nowrap; + overflow: scroll; +} + +.overflow-clip-clip { + text-overflow: clip clip; +} + +.overflow-clip-ellipsis { + text-overflow: clip ellipsis; +} + +.overflow-ellipsis-ellipsis { + text-overflow: ellipsis ellipsis; +} + +.overflow-ellipsis-string { + text-overflow: ellipsis " [..]"; +} +</pre> + + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">// On fait défiler chaque paragraphe afin que le début soit également caché +const paras = document.querySelectorAll("p"); + +for (let para of paras) { + para.scroll(100, 0); +} +</pre> + +<h4 id="result">Résultat</h4> + +<p>{{EmbedLiveSample('two-value_syntax', 600, 360)}}</p> <h2 id="Spécifications">Spécifications</h2> |