Запускать функцию JS только на экране (не печатать)?

Question

Запускать функцию JS только на экране (не печатать)?

1

У меня есть 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) {

suntrop 23 окт. 2017, в 17:52

Источник

1

почему вы не делаете усечение в CSS (используя переполнение текста: ellipsis)?
Touffy 23 окт. 2017, в 15:44
1

Я думаю, что OP искал это, чтобы сделать это через стороннюю библиотеку, поскольку он, кажется, использует ReadMore.js . OP, я бы, возможно, readmore.js ваш вопрос с помощью jquery и readmore.js чтобы увидеть, могут ли другие люди прийти на помощь
DMcCallum83 23 окт. 2017, в 15:45

Теги:

javascript

printing

1 ответ

Ещё вопросы

почему вы не делаете усечение в CSS (используя переполнение текста: ellipsis)?
Я думаю, что OP искал это, чтобы сделать это через стороннюю библиотеку, поскольку он, кажется, использует ReadMore.js . OP, я бы, возможно, readmore.js ваш вопрос с помощью jquery и readmore.js чтобы увидеть, могут ли другие люди прийти на помощь

Robert Wade · Answer 1 · 2017-10-23T14-34-00.000Z

Похоже, вы используете плагин 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;
    }
}