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

Exemple de code de la propriété CSS hyphens.

<style>
.hyphens-none{  : none }
.hyphens-manual{  : manual }
.hyphens-auto{  : auto }

.mot-cesure{ background-color:#ccc }
.exemple{ width:60%; font:14px sans-serif; border:1px solid red }
</style>
Césures dans le texte :<br>
po&amp; #45; sition<br>
apparaît&amp; #x2010; dans<br>
espa&amp; #8208; cétant<br>
at&amp; #45; tachées<br>
justi-fication<br>
appa&amp; shy; raître<br>
Pas de propriété CSS hyphens 
<div class="exemple">Dans le cas d'une justification à droite et à gauche du texte, le tiret inséré à la <span class="mot-cesure">po&#45; sition</span> de coupure d'un mot <span class="mot-cesure">apparaît&#x2010; dans</span> la largeur de la colonne de texte, mais jamais en marge.

De même on ne sépare aucune des ponctuations <span class="mot-cesure">at&#45; tachées</span> au mot (la coupure se fait après l'espace qui les sépare du mot suivant, cette <span class="mot-cesure">espa&#8208; cétant</span> alors réduite à une largeur nulle en <span class="mot-cesure">justi-fication</span> à droite et à gauche de la ligne). La coupure sur ces espaces ne fait <span class="mot-cesure">appa&shy; raître</span> aucune coupure de mot, donc aucun tiret de césure n'est nécessaire.</div>
.identifiant{ hyphens : none }
<div class="exemple hyphens-none">Dans le cas d'une justification à droite et à gauche du texte, le tiret inséré à la <span class="mot-cesure">po&#45; sition</span> de coupure d'un mot <span class="mot-cesure">apparaît&#x2010; dans</span> la largeur de la colonne de texte, mais jamais en marge.

De même on ne sépare aucune des ponctuations <span class="mot-cesure">at&#45; tachées</span> au mot (la coupure se fait après l'espace qui les sépare du mot suivant, cette <span class="mot-cesure">espa&#8208; cétant</span> alors réduite à une largeur nulle en <span class="mot-cesure">justi-fication</span> à droite et à gauche de la ligne). La coupure sur ces espaces ne fait <span class="mot-cesure">appa&shy; raître</span> aucune coupure de mot, donc aucun tiret de césure n'est nécessaire.</div>
.identifiant{ hyphens : manual }<br>
<div class="exemple hyphens-manual">Dans le cas d'une justification à droite et à gauche du texte, le tiret inséré à la <span class="mot-cesure">po&#45; sition</span> de coupure d'un mot <span class="mot-cesure">apparaît&#x2010; dans</span> la largeur de la colonne de texte, mais jamais en marge.

De même on ne sépare aucune des ponctuations <span class="mot-cesure">at&#45; tachées</span> au mot (la coupure se fait après l'espace qui les sépare du mot suivant, cette <span class="mot-cesure">espa&#8208; cétant</span> alors réduite à une largeur nulle en <span class="mot-cesure">justi-fication</span> à droite et à gauche de la ligne). La coupure sur ces espaces ne fait <span class="mot-cesure">appa&shy; raître</span> aucune coupure de mot, donc aucun tiret de césure n'est nécessaire.</div>
.identifiant{ hyphens : auto }
<div class="exemple hyphens-auto">Dans le cas d'une justification à droite et à gauche du texte, le tiret inséré à la <span class="mot-cesure">po&#45; sition</span> de coupure d'un mot <span class="mot-cesure">apparaît&#x2010; dans</span> la largeur de la colonne de texte, mais jamais en marge.

De même on ne sépare aucune des ponctuations <span class="mot-cesure">at&#45; tachées</span> au mot (la coupure se fait après l'espace qui les sépare du mot suivant, cette <span class="mot-cesure">espa&#8208; cétant</span> alors réduite à une largeur nulle en <span class="mot-cesure">justi-fication</span> à droite et à gauche de la ligne). La coupure sur ces espaces ne fait <span class="mot-cesure">appa&shy; raître</span> aucune coupure de mot, donc aucun tiret de césure n'est nécessaire.</div>

Interprétation du code de la propriété hyphens CSS par votre navigateur.

Césures dans le texte :
po&#45;sition
apparaît&#x2010;dans
espa&#8208;cétant
at&#45;tachées
justi-fication
appa&shy;raître
Pas de propriété CSS hyphens
Dans le cas d'une justification à droite et à gauche du texte, le tiret inséré à la po-sition de coupure d'un mot apparaît‐dans la largeur de la colonne de texte, mais jamais en marge. De même on ne sépare aucune des ponctuations at-tachées au mot (la coupure se fait après l'espace qui les sépare du mot suivant, cette espa‐cétant alors réduite à une largeur nulle en justi-fication à droite et à gauche de la ligne). La coupure sur ces espaces ne fait appa­raître aucune coupure de mot, donc aucun tiret de césure n'est nécessaire.
.identifiant{ hyphens : none }
Dans le cas d'une justification à droite et à gauche du texte, le tiret inséré à la po-sition de coupure d'un mot apparaît‐dans la largeur de la colonne de texte, mais jamais en marge. De même on ne sépare aucune des ponctuations at-tachées au mot (la coupure se fait après l'espace qui les sépare du mot suivant, cette espa‐cétant alors réduite à une largeur nulle en justi-fication à droite et à gauche de la ligne). La coupure sur ces espaces ne fait appa­raître aucune coupure de mot, donc aucun tiret de césure n'est nécessaire.
.identifiant{ hyphens : manual }
Dans le cas d'une justification à droite et à gauche du texte, le tiret inséré à la po-sition de coupure d'un mot apparaît‐dans la largeur de la colonne de texte, mais jamais en marge. De même on ne sépare aucune des ponctuations at-tachées au mot (la coupure se fait après l'espace qui les sépare du mot suivant, cette espa‐cétant alors réduite à une largeur nulle en justi-fication à droite et à gauche de la ligne). La coupure sur ces espaces ne fait appa­raître aucune coupure de mot, donc aucun tiret de césure n'est nécessaire.
.identifiant{ hyphens : auto }
Dans le cas d'une justification à droite et à gauche du texte, le tiret inséré à la po-sition de coupure d'un mot apparaît‐dans la largeur de la colonne de texte, mais jamais en marge. De même on ne sépare aucune des ponctuations at-tachées au mot (la coupure se fait après l'espace qui les sépare du mot suivant, cette espa‐cétant alors réduite à une largeur nulle en justi-fication à droite et à gauche de la ligne). La coupure sur ces espaces ne fait appa­raître aucune coupure de mot, donc aucun tiret de césure n'est nécessaire.

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

copie d'écran de l'affichage de la propriété CSS hyphens