如何使得textarea中的字体，显示换行效果等

最新推荐文章于 2025-07-02 17:22:07 发布

原创最新推荐文章于 2025-07-02 17:22:07 发布 · 3.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

html 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了两种使文本区域（textarea）中的文字能够正确显示换行和格式的方法：一是直接使用textarea控件；二是利用<pre>标签，并通过CSS样式控制实现换行和字体效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何使得textarea中的字体，显示换行效果等

两种方案：

(1)将内容放入到textarea的控件中显示即可。此方法可以用于新增，修改一个页面的情况下。

(2)将内容用<pre></pre>标签包裹起来即可，这里需要控制<pre>标签的样式才能显示出换行的效果：

pre {
			white-space: pre-wrap;       /* css-3 */
			white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
			white-space: -pre-wrap;      /* Opera 4-6 */
			white-space: -o-pre-wrap;    /* Opera 7 */
			word-wrap: break-word;       /* Internet Explorer 5.5+ */
			word-break:break-all;
			overflow:hidden;
			color: #474455;
			font-size: 14px;
			font-family: "微软雅黑";
		}