Pergunta

Atualmente, estou tentando justificar o texto em uma textarea, infelizmente o CSS:

text-align: justify;

não funciona no texto como centro, esquerda e direita fazem. Eu tentei isso no Firefox 3 e IE 7 sem sorte.

Existe alguma maneira de contornar isso?

Foi útil?

Solução

Eu não acho que isso é possível no elemento html textarea. você pode ser capaz de usar algum tipo de editor WYSIWYG (div editável). ie. fckeditor

Outras dicas

Eu lidei com o mesmo assunto e descobri solução muito estúpido. Certifique-se de que o texto a ser exibido cai dentro dos elementos de início e fim tag na mesma linha e não na linha seguinte

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

e não como

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

Dependendo do seu navegador de destino ... esta solução funciona em Chrome. Ele não funciona trabalho no Firefox no entanto ... mas eu vou postá-lo de qualquer maneira.

Além de definir text-align: justify, você também deve definir white-space:. Normais

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

jsFiddle: http://jsfiddle.net/cb5JN/

Eu acredito que a prática comum é usar o TEXTAREA para entrada sem worying sobre a justificação; e, em seguida, uma vez que a entrada é processada (ou seja, o FORM é apresentado, ou um evento da TEXTAREA é capturado), os conteúdos são exibidas num elemento de texto não editável (tais como P, SPAN, TD) onde o atributo estilo text-align: justify; serão honrados.

Para mim (no Firefox), este código funciona perfeitamente:

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

Usando um comum div com contenteditable = "true" trabalhou no meu caso. Não funciona para a maioria dos navegadores móveis embora.

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

Ele funciona bem no Chrome, mas não no IE.

text-align: justify; white-space: normal;

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top