Sintassi

Significato dei valori principali:

• none: Disabilita la sillabazione. Le parole non vengono mai spezzate automaticamente.

• manual: Abilita la sillabazione esclusivamente nei punti di sillabazione indicati manualmente, ad esempio con il carattere Soft Hyphen (\u00AD o ­).

• auto: Il browser applica la sillabazione automatica secondo le regole della lingua del contenuto, se il dizionario di sillabazione è disponibile.

Esempio proprietà: hyphens

Codice Esempio: hyphens

CODE: CSS

1. .hyphens-auto {

2.   width: 300px;

3.   hyphens: auto;

4.   text-align: justify;

5.   font-size: 18px;

6.   line-height: 1.6;

7.   background: #e6f2ff;

8.   padding: 10px;

9.   border-radius: 6px;

10.   lang: "it";

11. }

13. .hyphens-none {

14.   width: 300px;

15.   hyphens: none;

16.   text-align: justify;

17.   font-size: 18px;

18.   line-height: 1.6;

19.   background: #ffe6e6;

20.   padding: 10px;

21.   border-radius: 6px;

22. }

Contenuto Esempio: hyphens

  
  <style>
    .hyphens-auto {
      width: 300px;
      hyphens: auto;
      text-align: justify;
      font-size: 18px;
      line-height: 1.6;
      background: #e6f2ff;
      padding: 10px;
      border-radius: 6px;
      lang: "it";
    }

    .hyphens-none {
      width: 300px;
      hyphens: none;
      text-align: justify;
      font-size: 18px;
      line-height: 1.6;
      background: #ffe6e6;
      padding: 10px;
      border-radius: 6px;
    }
  </style>

  <div class="hyphens-auto" lang="it">
      Questo è un esempio di testo giustificato con la sillabazione automatica attivata...
  </div>

  <div class="hyphens-none">
      Questo è un esempio dello stesso testo ma con la sillabazione disattivata...
  </div>
  

📌 A cosa serve lang in CSS?

In CSS, la proprietà lang non esiste direttamente, ma viene usata come selettore per applicare stili in base all'attributo lang presente nell'HTML. Serve per selezionare elementi HTML in base alla loro lingua, impostata con l’attributo lang.

Sintassi:

CODE: CSS

1. /* Selettore CSS che prende tutti gli elementi con lang="it" */

2. :lang(it) {

3.   hyphens: auto;

4. }

Esempio pratico:

CODE: HTML

1. <p lang="it">Questo è un testo in italiano.</p>

2. <p lang="en">This is a text in English.</p>

CODE: CSS

1. :lang(it) {

2.   hyphens: auto;

3. }

5. :lang(en) {

6.   hyphens: none;

7. }

In questo esempio:

• Il testo in italiano può essere sillabato automaticamente.

• Il testo in inglese non verrà sillabato.

In CSS:

• lang non è una proprietà, ma un selettore strutturale (:lang()).

• Si usa per applicare stili diversi a seconda della lingua definita nell’HTML.

• È fondamentale per far funzionare bene la sillabazione automatica con hyphens: auto.

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser