testo che si adatta alla larghezza del div

**dla86** · 07-04-2015, 16:44

ciao,
esiste una regola css che permetta al testo di occupare in larghezza tutto la spazio del div contenitore?
allego un immagini per far capire meglio..

**KillerWorm** · 07-04-2015, 19:23

Ciao, nel caso specifico il tuo testo ha un allineamento giustificato ma l'ultima riga ha anche una distribuzione degli spazi tra le lettere.
Da quel che so esistono varie regole per impostare tali formattazioni, ma alcune sono mal supportate dai vari browser.
In particolare il testo viene "distribuito" solo su IE e l'ultima riga viene giustificata solo su IE e FF (a meno di usare particolari stratagemmi).

Un esempio:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      #justy{
        border: 1px solid Grey;
        background: DodgerBlue;
        width: 280px;
        font: 32pt/115% Tahoma, Geneva, sans-serif;
        padding-bottom: 10px;
        text-align: justify;
        text-align-last: justify;
        -moz-text-align-last: justify; /* FF */
        text-justify: distribute; /* solo IE */
      }
    </style>
  </head>
  <body>
    <div id="justy">Ciao io occupo tutta la larghezza</div>
  </body>
</html>

**dla86** · 07-04-2015, 19:40

per FF intendi firefox? a me l'ultima riga su firefox non viene giustificata..

**KillerWorm** · 07-04-2015, 20:35

Sì, quando si parla di browser, FF sta ad intendere Firefox.

Per il resto ho già risposto sopra:

In particolare il testo viene "distribuito" solo su IE e l'ultima riga viene giustificata solo su IE e FF

Non confondere "allineamento giustificato" con "giustificazione distribuita". Su FF, l'ultima riga viene allineata in modo giustificato (la dove ci sia qualcosa da giustificare) ma non viene "distribuita".

Cosa significa?
L'allineamento giustificato agisce sullo spazio tra una parola e l'altra. La giustificazione "distribuita" agisce sullo spazio tra una lettera e l'altra.
Se nell'ultima riga c'è una sola parola, l'allineamento giustificato ovviamente non avrà alcun effetto.
Solo su IE avviene una giustificazione distribuita (come ho indicato).

**dla86** · 07-04-2015, 20:36

scusa.

**KillerWorm** · 07-04-2015, 20:54

No problem.

Giusto per la cronaca, per estendere lo spazio tra le lettere si può usare letter-spacing (supportato da tutti i browser).
Questo però non consente una distribuzione automatica degli spazi.

Se cerchi soluzioni cross-browser forse trovi qualcosa in JavaScript/jQuery.

Discussione: testo che si adatta alla larghezza del div

Strumenti discussione

Ricerca discussione

Visualizza

testo che si adatta alla larghezza del div

Permessi di invio