CSS3 - Texte

CSS3 contenait plusieurs fonctionnalités supplémentaires, qui seront ajoutées plus tard.

  • text-overflow
  • word-wrap
  • word-break

Voici les propriétés les plus couramment utilisées dans CSS3 -

N ° Sr. Valeur et description
1

text-align-last

Utilisé pour aligner la dernière ligne du texte
2

text-emphasis

Utilisé pour mettre en valeur le texte et la couleur
3

text-overflow

utilisé pour déterminer comment le contenu débordé qui n'est pas affiché est signalé aux utilisateurs
4

word-break

Utilisé pour couper la ligne en fonction du mot
5

word-wrap

Utilisé pour casser la ligne et passer à la ligne suivante

Dépassement de texte

La propriété text-overflow détermine comment le contenu débordé qui n'est pas affiché est signalé aux utilisateurs. l'exemple d'exemple de dépassement de texte est présenté comme suit -

<html>
   <head>
      <style>
         p.text1 {
            white-space: nowrap; 
            width: 500px; 
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: clip;
         }
         p.text2 {
            white-space: nowrap; 
            width: 500px; 
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: ellipsis;
         }
      </style>
   </head>

   <body>
   
      <b>Original Text:</b>
   
      <p>
         Tutorials Point originated from the idea that there exists a class of 
         readers who respond better to online content and prefer to learn new 
         skills at their own pace from the comforts of their drawing rooms.
      </p>
      
      <b>Text overflow:clip:</b>
   
      <p class = "text1">
         Tutorials Point originated from the idea that there exists
         a class of readers who respond better to online content and prefer 
         to learn new skills at their own pace from the comforts of their 
         drawing rooms.
      </p>
      
      <b>Text overflow:ellipsis</b>
   
      <p class = "text2">
         Tutorials Point originated from the idea that there exists
         a class of readers who respond better to online content and 
         prefer to learn new skills at their own pace from the comforts 
         of their drawing rooms.
      </p>
      
   </body>
</html>

Il produira le résultat suivant -

Saut de mots CSS3

Utilisé pour casser la ligne, le code suivant montre l'exemple de code de saut de mot.

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

   <body>
   
      <b>line break at hyphens:</b>
      <p class = "text1">
         Tutorials Point originated from the idea that there exists a 
         class of readers who respond better to online content and prefer 
         to learn new skills at their own pace from the comforts of 
         their drawing rooms.
      </p>
      
      <b>line break at any character</b>
   
      <p class = "text2">
         Tutorials Point originated from the idea that there exists a 
         class of readers who respond better to online content and 
         prefer to learn new skills at their own pace from the comforts 
         of their drawing rooms.
      </p>
      
   </body>
</html>

Il produira le résultat suivant -

Emballage de mots CSS

L'habillage de mots est utilisé pour couper la ligne et passer à la ligne suivante. Le code suivant aura un exemple de syntaxe -

p {
   word-wrap: break-word;
}