在打印机友好的样式表的情况下，我使用以下:

/* screen style */
.print_only { display: none; }

/* print stylesheet */
div.print_only { display: block; }
span.print_only { display: inline; }
.no_print { display: none; }

I used this when I needed to print a form containing values and the input fields were difficult to print. So I added the values wrapped in a span.print_only tag (div.print_only was used elsewhere) and then applied the .no_print class to the input fields. So on-screen you would see the input fields and when printed, only the values. If you wanted to get fancy you could use JS to update the values in the span tags when the fields were updated but that wasn't necessary in my case. Perhaps not the the most elegant solution but it worked for me!

visibility:hidden将隐藏元素，但元素是他们的DOM。在display:none的情况下，它会从DOM中移除元素。

你可以为元素选择hide或unhide。但是一旦你删除它(我的意思是不显示)，它就没有明确的相反值。Display有几个值，如Display:block, Display:inline, Display:inline-block和许多其他值。你可以从W3C找到它。

这是一个来自未来的答案，在你问这个问题大约8年后。虽然仍然没有显示相反的值:没有，但继续读下去……还有更好的东西。

display属性重载得太厉害了，一点都不好笑。它至少有三个不同的功能。它控制:

外部显示类型(元素如何参与父流布局，例如块，内联) 内部显示类型(子元素的布局，例如flex, grid) 显示框(元素是否显示，例如contents, none)。

长期以来，这一直是现实，我们已经学会了忍受它，但一些姗姗来迟的改进(希望如此!)正在向我们走来。

Firefox现在支持display属性的双值语法(或多关键字值)，用于分隔外部和内部显示类型。例如，block现在变成了block flow, flex变成了block flex。这并不能解决一个都没有的问题，但我认为明确的关注点分离是朝着正确方向迈出的一步。

与此同时，Chromium(85+)给了我们内容可见性属性，并大张旗鼓地宣布了它。它的目标是解决一个不同的问题——加速页面加载时间，它不呈现一个元素(及其子布局)，直到它接近视口并且真正需要被看到，同时仍然可以用于“查找”搜索等。它通过给它赋值auto自动完成这个。这本身就是令人兴奋的消息，但看看它还做了什么……

The content-visibility: hidden property gives you all of the same benefits of unrendered content and cached rendering state as content-visibility: auto does off-screen. However, unlike with auto, it does not automatically start to render on-screen. This gives you more control, allowing you to hide an element's contents and later unhide them quickly. Compare it to other common ways of hiding element's contents: display: none: hides the element and destroys its rendering state. This means unhiding the element is as expensive as rendering a new element with the same contents. visibility: hidden: hides the element and keeps its rendering state. This doesn't truly remove the element from the document, as it (and it's subtree) still takes up geometric space on the page and can still be clicked on. It also updates the rendering state any time it is needed even when hidden. content-visibility: hidden, on the other hand, hides the element while preserving its rendering state, so, if there are any changes that need to happen, they only happen when the element is shown again (i.e. the content-visibility: hidden property is removed).

哇。所以这就是display:一直都不应该是——一种从布局中优雅地、完全独立于显示类型的删除元素的方法!因此，与content-visibility: hidden相反的是content-visibility: visible，但是你在auto中还有第三个非常有用的选项，它会为你做惰性渲染，加速你的初始页面加载。

唯一的坏消息是Firefox和Safari还没有采用它。但谁知道呢，当你(亲爱的开发伙伴)读到这篇文章时，情况可能已经改变了。请关注https://caniuse.com/css-content-visibility!

恢复到原来的状态put:

 display=""

你可以使用这个display:block;并同时添加overflow:hidden;

在打印机友好的样式表的情况下，我使用以下:

/* screen style */
.print_only { display: none; }

/* print stylesheet */
div.print_only { display: block; }
span.print_only { display: inline; }
.no_print { display: none; }

I used this when I needed to print a form containing values and the input fields were difficult to print. So I added the values wrapped in a span.print_only tag (div.print_only was used elsewhere) and then applied the .no_print class to the input fields. So on-screen you would see the input fields and when printed, only the values. If you wanted to get fancy you could use JS to update the values in the span tags when the fields were updated but that wasn't necessary in my case. Perhaps not the the most elegant solution but it worked for me!