Question

我有一个长文本的DIV并用函数截断它。这一切都很好，直到有人打印页面。截断的文字不可读。

我有什么方法可以阻止它吗？

我已经找到了CSS的媒体打印的等价物，但我能找到的所有内容都适用于屏幕宽度。我不知道什么是更好的：仅截断媒体屏幕或删除“打印”上的截断。

// 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>',
        });
    }
});

我试过这个，但它不起作用（仍然被截断）

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;
    }
}

仅在屏幕上运行JS功能（不打印）？

1 个答案: