Justify Text in a HTML/XHTML TextArea

问题

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?

回答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

回答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>

回答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/

回答4:

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.

回答5:

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;
}

回答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>

回答7:

It works fine on Chrome, but not on IE.

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

来源：https://stackoverflow.com/questions/427039/justify-text-in-a-html-xhtml-textarea

标签

html

css

textarea

text-alignment

justify