CSS3 - Testo

CSS3 conteneva diverse funzionalità extra, che vengono aggiunte in seguito.

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

Ci sono le seguenti proprietà più comunemente usate in CSS3:

Sr.No. Valore e descrizione
1

text-align-last

Utilizzato per allineare l'ultima riga del testo
2

text-emphasis

Utilizzato per enfatizzare testo e colore
3

text-overflow

utilizzato per determinare il modo in cui il contenuto in eccesso che non viene visualizzato viene segnalato agli utenti
4

word-break

Utilizzato per interrompere la linea in base alla parola
5

word-wrap

Utilizzato per interrompere la linea e passare alla riga successiva

Overflow del testo

La proprietà text-overflow determina il modo in cui il contenuto in overflow che non viene visualizzato viene segnalato agli utenti. l'esempio di esempio di overflow del testo è mostrato come segue:

<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>

Produrrà il seguente risultato:

CSS3 Word Breaking

Utilizzato per interrompere la riga, il codice seguente mostra il codice di esempio dell'interruzione di parole.

<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>

Produrrà il seguente risultato:

Word wrapping CSS

Il ritorno a capo automatico viene utilizzato per interrompere la riga e passare alla riga successiva. Il codice seguente avrà una sintassi di esempio:

p {
   word-wrap: break-word;
}