在 HTML/XHTML TextArea 中对齐文本

Posted 2023-05-07

【中文标题】在 HTML/XHTML TextArea 中对齐文本

【英文标题】：Justify Text in a 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>

【讨论】：

发现

存在这样的问题

当所有代码 textarea 代码都在同一行时，它的工作方式非常奇怪！调试太可怕了！谢谢，声誉++

亲爱的朋友们...你在评论之前测试过这个吗！！！在 html5 中不适合我

【参考方案2】：

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

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

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

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

【讨论】：

但是，添加“white-space: normal”会导致 IE 在您按 Enter 时插入空格而不是新行！

为了允许显示新行，您必须使用 white-space: pre-line;。另请参阅here。

现在它也可以在没有空白属性的情况下工作。

【参考方案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

【讨论】：

这也是我在谷歌搜索结果中发现的，只是希望这里的人可能知道我可能错过的东西。谢谢。

另见this答案。

【参考方案7】：

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

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