Question

我有一个问题，当打印网页时，非常高的<textarea></textarea>控件不适合A4页面。在浏览器内的网页上，textarea显示得很好，但是当我去打印时，textarea的底部会从页面底部被切掉，它不会继续打印到下一页。我在Firefox 3.5和IE7 / 8中遇到了这个问题。

我尝试将大量CSS样式应用于<textarea>控件，包括page-break-inside: avoid和overflow: visible，但无济于事。

修改：以下是根据Firebug应用的所有样式：

element.style
{
    height:1400px;
    overflow-x:visible;
    overflow-y:visible;
}

#content div.interviewGpForm div.formRow div.formElement textarea
{
    margin-left:1px;
}

#tabContent input, #tabContent select, #tabContent textarea
{
    width:80%;
}

textarea
{
    font-family:Arial,Helvetica,sans-serif;
    font-size:1.2em;
    padding:1px;
}

input, select, textarea
{
    border:1px solid #BFCDC9;
}

textarea
{
    page-break-inside:avoid !important;
}

#page
{
    text-align:left;
}

Answer 1

在您的文字区域下放置一些内容，如果您不想在其中播放任何内容，可能只是＆amp; nbsp; 。你也应该使用“打印css，如果你还没有：

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Answer 2

jQuery救援！

$(document).ready(function() {
  $('#myTextArea').mouseleave( function(){
    $('#myHiddenP').html($(this).val());      
  });
});

考虑如何使用textarea，单击它，键入，然后移动鼠标以执行其他操作。只有当鼠标移动到文本框区域之外时才会触发此事件（比如单击文件 - >打印）。当发生这种情况时，我们只是将文本框的内容隐藏在隐藏的段落中。

html：

<textarea id="myTextArea"></textarea>
<p id="myHiddenP"></p>

然后在你的屏幕样式表中：

#myTextArea{ height: 1400px; display: block;}
#myHiddenP { display: none;}

和您的打印样式表：

#myTextArea {display: none;}
#myHiddenP {display: block; height: 1400px;}

Answer 3

这是我在处理最近的项目时遇到的一个问题。该问题似乎与页面顶部的XHTML声明有关。使用STRICT或TRANSITIONAL似乎会导致浏览器无法打印溢出内容。 删除DTD解决了这个问题。

现在，我在IE7和FF 2.0中对此进行了测试，并且只有IE了解溢出：在打印样式表中可见。我的目标受众使用IE，所以我现在很好地删除DTD（这真的很糟糕!!!）因为我找不到更好的解决方案而且这不需要任何额外的代码来实现这一点。

Answer 4

您是否跟踪过应用于textarea的样式？具体来说，你是否有任何需要覆盖的打印样式（可能是浏览器默认值？）？

尝试将这样的summat添加到样式表

@media print {
  /* style sheet for print goes here */
  textarea { overflow:visible };
}

Answer 5

有一个旧的IE错误报告（针对IE 5.5）有关同一问题，并且解决方法是使用 javascript将textarea中的内容复制到“div”中，并隐藏原始textarea： http://support.microsoft.com/kb/294901

看起来这是多年后修复的错误！

Answer 6

您是在行和列中设置高度/宽度，还是使用CSS属性？

Answer 7

这似乎是HTML本身的一般限制。我尝试添加一个新的完全空白页面，完全没有外部CSS和脚本加载，使用下面的标记：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div>
        <textarea cols="50" rows="100" style="overflow: visible; page-break-inside: avoid;"></textarea>
    </div>
</body>
</html>

......当我去打印时它仍然被切断了。 Firefox，IE7 / 8和Opera中的行为相同。是什么赋予了？我错过了什么吗？当然，如果某些内容不适合页面，那么您只需将其继续到下一页即可！？

HTML / CSS - 非常高的<textarea>在打印</textarea>时从A4页面消失

7 个答案: