Giustifica il testo in un TextArea HTML / XHTML

Question

Attualmente sto cercando di giustificare il testo in un'area di testo, sfortunatamente il CSS:

text-align: justify;

Non funziona sul testo come al centro, a sinistra ea destra. Ho provato questo in Firefox 3 e IE 7 senza fortuna.

C'è un modo per aggirare questo?

Answer 1

Non credo sia possibile nell'elemento textarea html. potresti essere in grado di utilizzare una sorta di editor wysiwyg (div modificabile). vale a dire. fckeditor

Answer 2

Ho affrontato lo stesso problema e ho scoperto una soluzione molto stupida. Assicurati che il testo da visualizzare rientri negli elementi tag iniziale e finale nella stessa riga e non nella riga successiva

<textarea  name="description" readonly="readonly" rows="4" cols="66">Text aligned toward left</textarea>

e non come

<textarea  name="description" readonly="readonly" rows="4" cols="66">
Text aligned toward left
</textarea>

Answer 3

A seconda del browser di destinazione ... questa soluzione funziona in Chrome. Tuttavia, non funziona in Firefox ... ma lo posterò comunque.

Oltre a impostare text-align: justify, devi anche impostare white-space: normal.

    textarea {
        text-align: justify;
        white-space: normal;
    }

JSFIDDLE: http://jsfiddle.net/cb5JN/

Answer 4

Credo che la pratica comune sia quella di usare il TEXTAREA per l'input senza preoccuparsi della giustificazione; e quindi, una volta elaborato l'input (ovvero viene inviato il FORM o viene catturato un evento del TEXTAREA ), i contenuti vengono visualizzati in un elemento di testo non modificabile (come P , SPAN , TD ) dove l'attributo di stile text-align: justify; sarà onorato .

Answer 5

Per me (in Firefox), questo codice funziona perfettamente:

textarea{
    resize: none;
    text-align: justify;
    white-space: pre-line;
    -moz-text-align-last: left;
    text-align-last: left;
}

Answer 6

L'uso di un comune con div contenteditable = " true " ha funzionato nel mio caso. Tuttavia, non funziona per la maggior parte dei browser mobili.

<div contenteditable="true">Some content</div>

Answer 7

Funziona bene su Chrome, ma non su IE.

text-align: justify; spazio bianco: normale;