在HTML / XHTML TextArea中对齐文本

时间:2009-01-09 04:07:12

标签: html css textarea text-alignment justify

我目前正在尝试在textarea中证明文本,遗憾的是CSS:

text-align: justify;

对于像中心,左和右的文本不起作用。我在Firefox 3和IE 7中都尝试过这种方法,但没有运气。

有什么方法吗?

7 个答案:

答案 0 :(得分:19)

我处理了同样的问题并发现了非常愚蠢的解决方案。确保要显示的文本属于同一行中的开始和结束标记元素,而不是下一行

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

而不喜欢

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

答案 1 :(得分:9)

根据您的目标浏览器...此解决方案适用于Chrome。但它在Firefox中无法正常工作......但无论如何我都会发布它。

除了设置text-align:justify之外,还必须设置white-space:normal。

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

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

答案 2 :(得分:2)

我认为,通常的做法是使用TEXTAREA作为输入,而不是为了证明理由;然后,一旦处理了输入(即提交了FORM,或者捕获了TEXTAREA的事件),内容就会显示在不可编辑的文本元素中(例如{{1 }},PSPAN)其中TD样式属性将被尊重。

答案 3 :(得分:2)

对我来说(在Firefox中),这段代码完美无缺:

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

答案 4 :(得分:1)

在我的案例中使用常见的div with contenteditable="true"。但是对大多数移动浏览器都不起作用。

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

答案 5 :(得分:0)

我认为这在html textarea元素中是不可能的。你也许可以使用某种所见即所得的编辑器(可编辑的div)。即。 fckeditor的

答案 6 :(得分:0)

它适用于Chrome,但不适用于IE。

text-align:justify; 空格:正常;