html - Html 在打印中不可见

Question

如何使该文本在网页上可见但在打印网页中不可见。我不能使用媒体查询。

Answer 1

您将需要定义一个打印 css 文件。

看看http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/

您只需要包含两个不同的 css 文件（我的首选方法）：

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

Answer 2

您可以将文本包装在一个元素中并给它一个类。例如，如果文本还没有可以添加类的元素，则可以添加跨度。

<span class="printInvisible">This is a text</span>

然后，您可以定义一个用于打印的 css（您不需要为此进行媒体查询）：

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

并将您的类定义为在此样式表中不可见以隐藏它，例如：

.prinitInvisible {
     visibility: hidden;
}

或者

.prinitInvisible {
     display: none;
 }

Answer 3

即使您声明不能使用媒体查询，您也可以创建单独的样式表进行打印。

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

如果您可以使用 javascript 并且绝对不能使用上述内容，您可以为所有不应打印的内容添加一个类（例如class='no_print'），当您单击打印选项时，使用 javascript 分配另一个类以no_print使它们不可见。

例如使用 jQuery

$('.no_print').addClass('hide');

或者直接用css做

$('.no_print').css('visibility','hidden');