/ Code Css text-overflow | Résultat du code Css text-overflow | Copie d'écran / J'ai vu une erreur dans cette page

Exemple de code de la propriété CSS text-overflow.

<style>
.row { margin:10px; }
.exemple {  : hidden;  : nowrap; width:100px; border:1px solid #666; margin:0}
.text-indent { text-indent:-10px; }

.exemple-text-overflow-clip {  : clip }
.exemple-text-overflow-ellipsis {  : ellipsis }
.exemple-text-overflow-point {  : '???' }
.exemple-text-overflow-point-ellipsis {  : ellipsis '???' }
</style>

<div class="row">normal (clip)
<p class="exemple exemple-text-overflow-clip">C'est un grand exemple de text-overflow de type clip </p>
</div>
<div class="row">Ajout "..." (ellipsis)
<p class="exemple exemple-text-overflow-ellipsis">C'est un grand exemple de text-overflow de type ellipsis</p>
</div>
<div class="row">Ajout "..." (ellipsis)
<p style="width:50px; white-space:normal"  class="exemple exemple-text-overflow-ellipsis">C'est un grand exemple de text-overflow de type ellipsis</p>
</div>
<div class="row">Ajout "???" (string)
<p class="exemple exemple-text-overflow-point">C'est un grand exemple de text-overflow de type string</p>
</div>
<div class="row">Ajout deux valeurs ellipsis et "???" 
<p class="exemple text-indent exemple-text-overflow-point-ellipsis">C'est un grand exemple de text-overflow avec 2 valeurs</p>
</div>

Interprétation du code de la propriété text-overflow CSS par votre navigateur.

normal (clip)

C'est un grand exemple de text-overflow de type clip

Ajout "..." (ellipsis)

C'est un grand exemple de text-overflow de type ellipsis

Ajout "..." (ellipsis)

C'est un grand exemple de text-overflow de type ellipsis

Ajout "???" (string)

C'est un grand exemple de text-overflow de type string

Ajout deux valeurs ellipsis et "???"

C'est un grand exemple de text-overflow avec 2 valeurs

Interprétation normale du code de la propriété CSS text-overflow (copie d'écran).

copie d'écran de l'affichage de la propriété CSS text-overflow