在 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
的事件被捕获),内容被显示在一个不可编辑的文本元素中(例如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 上不行。
文本对齐:对齐; 空白:正常;
【讨论】:
以上是关于在 HTML/XHTML TextArea 中对齐文本的主要内容,如果未能解决你的问题,请参考以下文章
java中TextArea/JTextArea的对齐方式怎么设置的?