css - 打印 Textarea 文本 - 全长（高度）？

Question

我有一个网络表单，我的客户希望用户能够打印出来。使用 CSS 进行一些样式设置时效果很好，但是，我有几个textaear字段。如果用户键入的内容超过了 textarea 的高度，则打印时该类型将被截断。

我已经尝试过textarea{height:100%;}打印textarea{height:auto;}样式表，但这些都不起作用。

有没有办法将 textarea 字段的大小调整为仅打印版本的文本大小？如果可能的话，我更喜欢 CSS 解决方案，我可以插入到我的打印样式表中。如果这不可能，javascript 解决方案将起作用。

截图对比：

注意：如果我不能只影响打印版本，我可以考虑使用 JS 在有人输入时自动调整 textarea 字段的大小。

Answer 1

这对我有用（改编自这个 JS和这个 jQuery）：

function resizeAndPrint() {   
    var _print = window.print;
    window.print = function() {
        $('textarea').each(function() {
            $(this).height($(this).prop('scrollHeight'));
        });
        _print();
    }
    window.print();
}

Answer 2

firefox浏览器存在这个问题。

请在chrome浏览器中打开 html 文件以在textarea标签之间打印文本。打印大文本无需应用样式和脚本。textarea

要遵循的步骤：

1. 在 chrome 浏览器中打开 HTML 文件。
2. 单击 Ctrl + P。
3. 单击保存按钮（选择 PDF 格式）。
4. 打开 PDF 文件（textarea 如果包含多余的文本，请查看是否移动到第二页之间的所有文本）
5. 单击打印按钮。