对齐 HTML/XHTML 文本区域中的文本

Question

我目前正在尝试调整文本区域中的文本，不幸的是CSS：

text-align: justify;

不能像中心、左侧和右侧那样对文本起作用。 我已经在 Firefox 3 和 IE 7 中尝试过此操作，但没有成功。

有没有办法解决？

Answer 1

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

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

Answer 2

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

除了设置text-align：justify外，还必须设置white-space：normal。

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

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

Answer 3

对于我（在 Firefox 中）来说，这段代码运行得非常完美：

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

Answer 4

我相信常见的做法是使用 TEXTAREA 进行输入，而不用担心合理性； 然后，一旦输入被处理（即FORM被提交，或者TEXTAREA的事件被捕获），内容将显示在不可编辑的文本元素中（例如 P、SPAN、TD），其中将遵循 text-align: justify; 样式属性。

Answer 5

在我的例子中，使用常见的 div 和 contenteditable="true" 是有效的。 但不适用于大多数移动浏览器。

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

Answer 6

我认为这在 html textarea 元素中是不可能的。 您也许可以使用某种所见即所得编辑器（可编辑 div）。 IE。 fck编辑器

Answer 7

它在 Chrome 上运行良好，但在 IE 上则不行。

文本对齐：对齐；
空白：正常；