带有textarea的html页面答案

【问题标题】：html page with textarea带有textarea的html页面
【发布时间】：2015-03-05 10:53:19
【问题描述】：

我有 textarea，它一次只显示 3 行并使用滚动条。现在，当我打印包含 textarea 的 html 时，它只打印可见部分（即仅 3 行）。

我希望当用户打印 html 页面时，它应该在文本框中打印整个文本，而不是仅打印可见部分。

【问题讨论】：

stackoverflow.com/questions/4435906/…
查看@media print rule - 它允许您定义打印样式。
@Sunny 你可以在 print css 的帮助下完成。在另一个带有类的 div 中添加与 textarea 相同的文本，使该 div 隐藏在您的 style.css 中，并使 div 可见，textarea 隐藏在 print css 中，您可以在下面查看答案

【解决方案1】：

查看这个Demo 并按Ctrl+P，您会看到被隐藏，<div class="textarea"> 可见。 <pre><code>.textarea { display: none; } @media print { textarea { display: none; } .textarea { display: block; } } </code></pre> </div>

【讨论】：

只有在 textarea 内容是静态的情况下才有效。您需要将 'div' 和 'textarea' 与 javascript 同步。

【解决方案2】：

您可以在打印时为 textarea 定义不同的高度：

@media print {
   .selectorOfYourTextarea {
      height: 500px;
   }
}

这将使您的textarea 500px 的高度仅适用于打印机。但问题仍然是 500px 可能还不够。

【讨论】：