Effets de texte CSS


Table des matières

    Afficher la table des matières


Texte CSS Débordement, retour à la ligne, saut de ligne Règles et modes d'écriture

Dans ce chapitre, vous découvrirez les propriétés suivantes :

text-overflow
word-wrap
word-break
writing-mode

Débordement de texte CSS

La propriété CSS text-overflow spécifie la façon dont le contenu débordé qui n'est pas affiché doit être signalé à l’utilisateur.

Il peut être clipsé :

This is some long text that will not fit in the box

ou il peut être rendu sous forme de points de suspension (...) :

This is some long text that will not fit in the box

Le code CSS est le suivant :

Exemple

 p.test1 {
  
white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
    
overflow: hidden;
  
text-overflow: clip; 
}
p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
    
overflow: hidden;
  
text-overflow: ellipsis; 
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
p.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
</head>
<body>

<h1>The text-overflow Property</h1>
<p>The following two paragraphs contains a long text that will not fit in the box.</p>

<h2>text-overflow: clip:</h2>
<p class="test1">This is some long text that will not fit in the box</p>

<h2>text-overflow: ellipsis:</h2>
<p class="test2">This is some long text that will not fit in the box</p>

</body>
</html>


L'exemple suivant montre comment afficher le contenu débordé lorsque vous survolez l'élément :

Exemple

  div.test:hover {
  overflow: visible;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
div.test {
  white-space: nowrap; 
  width: 200px; 
  overflow: hidden; 
  border: 1px solid #000000;
}

div.test:hover {
  overflow: visible;
}
</style>
</head>
<body>

<p>Hover over the two divs below, to see the entire text.</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<br>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>

</body>
</html>




Habillage de mots CSS

La propriété CSS word-wrap permet aux mots longs d'être brisés et renvoyés sur la ligne suivante.

Si un mot est trop long pour tenir dans une zone, il s’étend à l’extérieur :

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

La propriété word-wrap vous permet de forcer le retour à la ligne du texte, quitte à le diviser au milieu d'un mot :

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

Le code CSS est le suivant :

Exemple

Autorisez les mots longs à être divisés et à passer à la ligne suivante :

  p {
  word-wrap: break-word;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
p.test {
  width: 11em; 
  border: 1px solid #000000;
  word-wrap: break-word;
}
</style>
</head>
<body>

<h1>The word-wrap Property</h1>

<p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

</body>
</html>



Casse-mot CSS

La propriété CSS word-break spécifie les règles de saut de ligne.

This paragraph contains some text. This line will-break-at-hyphens.

This paragraph contains some text. The lines will break at any character.

Le code CSS est le suivant :

Exemple

  p.test1 {
  word-break: 
keep-all;
}
p.test2 {
  word-break: 
break-all;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
p.test1 {
  width: 140px; 
  border: 1px solid #000000;
  word-break: keep-all;
}

p.test2 {
  width: 140px; 
  border: 1px solid #000000;
  word-break: break-all;
}
</style>
</head>
<body>

<h1>The word-break Property</h1>

<p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>

<p class="test2">This paragraph contains some text. The lines will break at any character.</p>

</body>
</html>



Mode d'écriture CSS

La propriété CSS writing-mode spécifie si les lignes de texte sont disposées horizontalement ou verticalement.

Du texte avec un élément span avec un mode d'écriture vertical-rl.

Some text with a span element with a vertical-rl writing-mode.

L'exemple suivant montre différents modes d'écriture :

Exemple

  p.test1 {
  writing-mode: horizontal-tb; 
}
span.test2 {
  writing-mode: vertical-rl; 
}
p.test2 {
  writing-mode: 
   vertical-rl; 
} 

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
p.test1 {
  writing-mode: horizontal-tb; 
}

span.test2 {
  writing-mode: vertical-rl; 
}

p.test2 {
  writing-mode: vertical-rl; 
}
</style>
</head>
<body>
<h1>The writing-mode Property</h1>

<p class="test1">Some text with default writing-mode.</p>

<p>Some text with a span element with a <span class="test2">vertical-rl</span> writing-mode.</p>

<p class="test2">Some text with writing-mode: vertical-rl.</p>

</body>
</html>




Propriétés de l'effet de texte CSS

Le tableau suivant répertorie les propriétés des effets de texte CSS :

text-justify

Spécifie comment le texte justifié doit être aligné et espacé

text-overflow

Spécifie comment le contenu débordé qui n'est pas affiché doit être signalé à l'utilisateur

word-break

Spécifie les règles de saut de ligne pour les scripts non-CJK

word-wrap

Permet aux mots longs d'être brisés et enroulés sur la ligne suivante

writing-mode

Spécifie si les lignes de texte sont disposées horizontalement ou verticalement