CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS word-break

La proprietà CSS word-break (CSS3) controlla la divisione delle parole

La proprietà word-break definisce come le parole possono essere spezzate o interrotte a capo per migliorare la gestione del testo e prevenire overflow. Valori come break-all e keep-all sono particolarmente utili in lingue diverse o con testi lunghi senza spazi.

Sintassi

word-break: normal | break-all | keep-all | break-word;

Significato dei valori principali:

  • normal: Il comportamento di default. Le parole si spezzano solo in punti normali di interruzione (es. spazi o trattini).

  • break-all: Permette la divisione delle parole ovunque necessario per evitare overflow, anche spezzando all’interno della parola.

  • keep-all: Utilizzato principalmente per testi in cinese, giapponese e coreano, impedisce la divisione delle parole.

  • break-word: (Non standard, ma supportato) Forza l’interruzione della parola se necessario, comportandosi simile a break-all ma con alcune differenze di priorità.


Esempio proprietà: word-break


Codice Esempio: word-break

CODE: CSSpreleva codice
  1. .container {
  2.   width: 300px;
  3.   border: 2px solid #333;
  4.   padding: 15px;
  5.   margin-bottom: 20px;
  6.   font-family: Arial, sans-serif;
  7. }
  8. .normal-break {
  9.   word-break: normal;
  10.   background-color: #4a90e2;
  11.   color: white;
  12.   padding: 10px;
  13.   margin-bottom: 10px;
  14. }
  15. .break-all {
  16.   word-break: break-all;
  17.   background-color: #50a14f;
  18.   color: white;
  19.   padding: 10px;
  20. }

Contenuto Esempio: word-break

Esempio di utilizzo di word-break

In questo esempio si mostra l’effetto di word-break impostato su normal e break-all su testi con parole lunghe senza spazi:


word-break: normal;
Questoèunaparolalongasenzaspazichedimostrailcomportamentodiword-breaknormal.
word-break: break-all;
Questoèunaparolalongasenzaspazichedimostrailcomportamentodibreak-all.

CSS e HTML per l'esempio di word-break:

  
  <style>
    .container {
      width: 300px;
      border: 2px solid #333;
      padding: 15px;
      margin-bottom: 20px;
      font-family: Arial, sans-serif;
    }
    .normal-break {
      word-break: normal;
      background-color: #4a90e2;
      color: white;
      padding: 10px;
      margin-bottom: 10px;
    }
    .break-all {
      word-break: break-all;
      background-color: #50a14f;
      color: white;
      padding: 10px;
    }
  </style>

  <div class="container normal-break">
    <strong>word-break: normal;</strong><br>
    Questoèunaparolalongasenzaspazichedimostrailcomportamentodiword-breaknormal.
  </div>

  <div class="container break-all">
    <strong>word-break: break-all;</strong><br>
    Questoèunaparolalongasenzaspazichedimostrailcomportamentodibreak-all.
  </div>
  

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

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies