Justificar texto en un área de texto HTML / XHTML

Question

Actualmente estoy tratando de justificar el texto en un área de texto, desafortunadamente el CSS:

text-align: justify;

No funciona en el texto como centro, izquierda y derecha. He intentado esto en Firefox 3 e IE 7 sin suerte.

¿Hay alguna forma de evitar esto?

Answer 1

no creo que esto sea posible en el elemento html textarea. es posible que pueda usar algún tipo de editor wysiwyg (div editable). es decir. fckeditor

Answer 2

Me ocupé del mismo problema y descubrí una solución muy estúpida. Asegúrese de que el texto que se va a mostrar se encuentra dentro de los elementos de etiqueta de inicio y fin en la misma línea y no en la línea siguiente

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

y no como

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

Answer 3

Dependiendo de su navegador de destino ... esta solución funciona en Chrome. Sin embargo, no funciona en Firefox ... pero lo publicaré de todos modos.

Además de configurar text-align: justify, también debe establecer white-space: normal.

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

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

Answer 4

Creo que la práctica común es usar el TEXTAREA para la entrada sin preocuparse por la justificación; y luego, una vez que se procesa la entrada (es decir, se envía FORM , o se captura un evento de TEXTAREA ), el contenido se muestra en un elemento de texto no editable (como P , SPAN , TD ) donde se respetará el atributo de estilo text-align: justify; .

Answer 5

Para mí (en Firefox), este código funciona perfectamente:

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

Answer 6

Usar un div con contenteditable = " true " funcionó en mi caso. Sin embargo, no funciona para la mayoría de los navegadores móviles.

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

Answer 7

Funciona bien en Chrome, pero no en IE.

alinear texto: justificar; espacio en blanco: normal;