在 HTML/XHTML TextArea 中对齐文本

Posted

技术标签:

【中文标题】在 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的事件被捕获),内容被显示在一个不可编辑的文本元素中(例如PSPAN , 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 上不行。

文本对齐:对齐; 空白:正常;

【讨论】:

以上是关于在 HTML/XHTML TextArea 中对齐文本的主要内容,如果未能解决你的问题,请参考以下文章

java中TextArea/JTextArea的对齐方式怎么设置的?

textarea 标签垂直对齐:中间

Java FX TextArea 对齐

textarea标签输出内容时不能顶格(左对齐)输出

如何让此页脚与 textarea 对齐? Flexbox 似乎没有这样做

HTML textarea 文本区域 外面说明文字垂直居中对齐的问题