Visualizzazione dei risultati da 1 a 7 su 7
  1. #1
    Utente di HTML.it L'avatar di z3n
    Registrato dal
    May 2008
    Messaggi
    61

    Giustificare testo in una div

    Ciao a tutti, vorrei giustificare n voci di menu in modo tale che (modificando lo spazio tra le lettere) occupino l'intera div.
    il codice usato è il seguente (ovviamente non funziona):
    http://jsfiddle.net/psyb6/1/

    il risultato che vorrei ottenere è una cosa del tipo
    |menuuuu1|
    |m e n u 2 |
    (un po grezza ma spero che renda l'idea).
    Come posso fare?
    Grazie

  2. #2
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    qualche anno fa, dovendo avere un allineamento forzato giustificato su un testo che doveva andare a capo in punti precisi, riuscii dopo vari tentativi a trovare una soluzione (di certo non eccelsa, tutt'altro, ma funzionante) con un'immagine spaziatrice, in pratica usando una gif trasparente, di lunghezza leggermente inferiore al div. Nel tuo caso in realtà va regolato lo spazio fra le lettere e non fra le parole ma te la passo egualmente, applicata al tuo codice modificato http://jsfiddle.net/psyb6/3/

  3. #3
    Utente di HTML.it L'avatar di z3n
    Registrato dal
    May 2008
    Messaggi
    61
    La mia idea era quella di una giustificazione "pura", nel senso di non utilizzare lo spazio fra le parole ma fra le lettere...

  4. #4
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    non puoi averla, lo spazio fra le lettere andrebbe calcolato e ripartito in base allo spazio vuoto, i css non consentono di farlo. Dovresti impostare il tutto manualmente, in base alla lunghezza della parola, ma non otterresti probabilmente un risultato soddisfacente, comunque puoi provarci (impostando per ciascun link un letter-spacing diverso) e avendo un allineamento che in qualche maniera somigli a ciò che vorresti ottenere. Non ci sono altre soluzioni

  5. #5
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    magari però con un font monospace sarebbe più facile fare i conti (forse)

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Ciao, (giusto per la cronaca) col solo css esistono alcuni metodi ma, o non sono cross-browser o sono poco versatili.

    Esiste la proprietà text-justify che fa esattamente ciò che chiedi. Peccato che funzioni solo su IE.
    Esiste la proprietà letter-spacing che è supportata dai vari browser ma a cui puoi solo assegnare una dimensione fissa. Questo rende l'operazione poco pratica. Inoltre l'ultima lettera viene "estesa" come le altre e, ad esempio, nei link si può notare la sottolineatura che va oltre la fine della parola.

    codice:
    <!DOCTYPE HTML>
    <html>
      <head>
        <title>Esempio</title>
        <meta charset="utf-8">
        <style type="text/css">
          /* solo IE */
          #menu{
            border: 1px solid black;
            width: 30%;
            text-align: justify;
            text-justify: distribute;
          }
          #menu a>div:after {
            content: "";
            display: inline-block;
            width: 100%;
          }
          
          /* cross-browser ma con larghezza fissa */
          #menu2{
            border: 1px solid black;
            width: 30%;
          }
          #menu2>a:nth-child(1){letter-spacing:1em;}
          #menu2>a:nth-child(2){letter-spacing:2em;}
        </style>
      </head>
      <body>
        <div id="menu">
          <a href="#"><div>menuuuu1</div></a>
          <a href="#"><div>menu2</div></a>
        </div>
        <div id="menu2">
          <a href="#"><div>menuuuu1</div></a>
          <a href="#"><div>menu2</div></a>
        </div>
      </body>
    </html>
    Probabilmente si riesce a trovare una soluzione valida (o più adeguata) con l'utilizzo di javascript/jquery.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  7. #7
    Utente di HTML.it L'avatar di z3n
    Registrato dal
    May 2008
    Messaggi
    61
    ringrazio entrambi per le risposte.
    @Prill, l'idea era quella di usare myriad pro, quindi dubito che si riesca a fare..
    @KillerWarm in effetti un tentativo con js l'avevo fatto, con charachterJustify (http://www.heychinaski.com/blog/2009...-using-jquery/ )per la precisione ma con scarsi risultati...

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.