javascript - 仅在屏幕上运行 JS 功能(不打印)？

Question

我有一个包含长文本的 DIV，并使用一个函数将其 chop 。这一切都很好，直到有人打印该页面。 chop 的文本将不可读。

有什么办法可以预防吗？

我一直在寻找 CSS 媒体打印的等效项，但我能找到的所有内容都适用于屏幕宽度。我不知道哪个更好:仅在媒体屏幕上 chop 或删除“打印”上的 chop 。

// Truncate the job description
$(function() {
    if ( $('#jetsSearch').length ) {
        $('.job-description').readmore({
            speed: 100,
            collapsedHeight: 50,
            moreLink: '<a href="#">Read more</a>',
            lessLink: '<a href="#">Less</a>',
        });
    }
});

我试过这个，但它不起作用(仍然被 chop )

if ( $('#jetsSearch').length && window.matchMedia("screen").matches) {

Answer 1

看起来您正在使用 readmore.js jquery 插件。

这就是我处理完全相同问题的方式。 Readmore.js 使用 javascript 将高度的内联样式(以及其他)应用到您的容器。在 CSS 中覆盖这些内联样式的唯一方法是在声明中使用 !important 规则。

因此，通过将 height: auto; 添加到具有重要规则的 data-readmore 数据属性的元素，您可以为打印样式覆盖它(我使用为此在我的 CSS 中打印媒体查询)。我还隐藏了“阅读更多”链接，因为它与打印页面无关。

@media print {
    [data-readmore] {
        height: auto !important;
    }
    [data-readmore-toggle] {
        display: none !important;
    }
}