Justify Text in a HTML/XHTML TextArea

Question

I am currently trying to justify text in a textarea, unfortunately the CSS:

text-align: justify;

Doesn't work on the text like center, left and right do. I've tried this in both Firefox 3 and IE 7 with no luck.

Is there any way around this?

Answer 1

I dealt with same issue and found out very stupid solution. Make sure that the text to be displayed falls within the start and end tag elements in the same line and not in the next line

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

and not like

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

Answer 2

Depending on your target browser... this solution works in Chrome. It does not work work in Firefox however... but I'll post it anyway.

In addition to setting text-align: justify, you must also set white-space: normal.

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

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