在 HTML/XHTML TextArea 中对齐文本答案

【问题标题】：Justify Text in a HTML/XHTML TextArea在 HTML/XHTML TextArea 中对齐文本
【发布时间】：2010-09-30 10:25:07
【问题描述】：

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

text-align: justify;

不适用于中心、左和右等文本。我已经在 Firefox 3 和 IE 7 中尝试过，但没有成功。

有没有办法解决这个问题？

【问题讨论】：

【解决方案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>

【讨论】：

【解决方案2】：

取决于您的目标浏览器...此解决方案适用于 Chrome。但是它在 Firefox 中不起作用……但我还是会发布它。

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

我同意，尽管客户在此之后将其作为设计的一部分，但不幸的是，这不适合这种情况。不过还是谢谢。
那么我认为简单的答案是否定的。在“textarea justify”上的 Google 搜索显示了许多类似的问题，但没有可用的解决方案，除了可能用富文本小部件替换 TEXTAREA。
这也是我在不幸问到这里之前想出的。感谢您的帮助。

【解决方案4】：

对我来说（在 Firefox 中），这段代码运行良好：

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

【讨论】：

【解决方案5】：

在我的情况下使用常见的div with contenteditable="true" 有效。但不适用于大多数移动浏览器。

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

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

【讨论】：