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?

Goatskin

Answer 1

i dont think this is possible in the html textarea element. you might be able to use some sort of wysiwyg editor (editable div). ie. fckeditor

Fortran

Thats what I've found as well trawling through Google search results, just hoping that someone here may know of something I might have missed. Thanks. – Goatskin

See also this answer. – Auctioneer

Answer 2

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>

Escuage

inded there is such issue with the <textarea> – Ruthenic

very weird how it works when all code textarea code is on the same line! horrible to debug! thanks, reputation++ – Soraya

dear friends... did you test this before commenting !!! Not working for me in HTML5 – Laborious

Answer 3

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/

Fury

However, adding "white-space: normal" causes IE to insert spaces instead of new lines when you press enter! – Clegg

In order to allow to show the new lines you must use white-space: pre-line;. See also here. – Auctioneer

Now it works without the white-space property as well. – Confront

Answer 4

For me (in Firefox), this code works perfectly:

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

Nival

Answer 5

I believe that common practice is to use the TEXTAREA for input without worying about justification; and then, once the input is processed (i.e. the FORM is submitted, or an event of the TEXTAREA is captured), the contents are displayed in a non-editable text element (such as P, SPAN, TD) where the text-align: justify; style attribute will be honored.

Sapwood

I agree, the client is after this as part of the design though, so unfortunately that that's not appropriate for the situation. Thanks though. – Goatskin

Then I think the simple answer is NO. A Google search on "textarea justify" shows lots of similar questions with no usable solution except maybe to replace the TEXTAREA with a Rich Text widget. – Sapwood

Thats what I had come up with as well before asking here unfortunately. Thanks for your help. – Goatskin

Answer 6

Using a common div with contenteditable="true" worked in my case. Doesn't work for most mobile browsers though.

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

Musgrave

Answer 7

It works fine on Chrome, but not on IE.

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

Telangiectasis