Я нашел замечательную библиотеку усечения html, truncate.js, которая удовлетворяет примерно 99% моих потребностей. Но у меня есть одна ноющая проблема, с которой я сталкиваюсь. У меня есть требование, которое требует, чтобы 'Show more' было помещено в конце определенного числа строк для серии сообщений ... чего этой библиотеке удается достичь для блока текста ... но когда дело доходит до многострочного отображения текста больше не позиционируется должным образом.

Я сделал поршень, чтобы продемонстрировать проблему. Все, что я хочу, - это иметь возможность размещать шоу больше в той же позиции для многострочного текста так же, как это выглядит для блока текста, сидящего на той же странице.

Моей первой попыткой было добавить prev () в функцию truncateNestedNodeEnd

if ($clipNode.length) {
        if ($.inArray(element.tagName.toLowerCase(), BLOCK_TAGS) >= 0) {
            // Certain elements like <li> should not be appended to.
            $element.after($clipNode);
        }
        else
            {
            //edited this line to add prev()
            //$element.append($clipNode)
            $element.prev().append($clipNode);

            }
       }`

enter image description here

Что дает мне то, что я хочу для многострочного текста, но затем нарушает исходную функциональность для блока текста, как показано в плунжере. Как я могу заставить эту функцию работать для двух случаев. Я все еще хочу, чтобы Показать больше появлялось в желтой части, когда эти два сообщения находятся на одной странице.

5
Abide Masaraure 29 Авг 2017 в 20:14

3 ответа

Лучший ответ

Проблема в том, что truncate.js рекурсивно помещает $ clipNode в разные контейнеры и удаляет их, если флаг усечения не установлен в значение true. Проблема с вашим подходом состояла в том, что вы добавляли к предыдущему узлу элемента, что было верно в случае перечисленных элементов, но не верно в случае отсутствия предыдущего элемента (как в случае текстового блока). Вот почему в вашем подходе он ничего не вставлял в текстовый блок. Я изменил код следующим образом и добавил еще один оператор добавления в конце функции, чтобы после завершения добавления $ clipNode он перемещал контейнер $ clipNode в предыдущий элемент, если он есть.

if ($clipNode.length) {
  if ($.inArray(element.tagName.toLowerCase(), BLOCK_TAGS) >= 0) {
    // Certain elements like <li> should not be appended to.
    $element.after($clipNode);
  } else {
    //edited this line to add prev()
    //$element.append($clipNode)
    $element.append($clipNode);

  }
}

if ($rootNode.height() > options.maxHeight) {
  if (child.nodeType === 3) { // text node
    truncated = truncateTextContent($child, $rootNode,
      $clipNode, options);
  } else {

    truncated = truncateNestedNode($child, $rootNode, $clipNode,
      options);
  }
}

if (!truncated && $clipNode.length) {
  $clipNode.remove();
} else {
  $element.prev().append($clipNode);
}

И проблема, казалось, решила

введите описание изображения здесь

Также ознакомьтесь с обновленным кодом в Plunker

1
BILAL AHMAD 8 Сен 2017 в 20:05

Вы пытаетесь получить усечение, чтобы сократить уже короткий блок текста. Строка упоминания не достаточно длинная, чтобы ее можно было разорвать, поэтому она переносится на новую строку, и нет никакого контента, который нужно урезать при достижении новой строки. Если вы удалите элементы div, которые форсируют короткие строки, то содержимое достигает конца строки и переносится, как вы ожидаете. Когда вы добавляете «showmore» перед предыдущим элементом, он не работает вообще, если есть только один элемент, как в случае вашего второго абзаца. Лишние пробелы, упомянутые @JohnH, делают форматирование уродливым, но не вызывают разрыв.

1
biznetix 8 Сен 2017 в 16:49

Я не уверен, что понимаю вашу цель, но я думаю, что вы пытаетесь сделать интервал более согласованным для повторяющихся тегов span с текстом "@Abide Masaraure".

Если это так, я предлагаю изучить сгенерированный HTML-код с помощью функции проверки Chrome или аналогичной функции из другого браузера.

Кажется, что нечетный интервал возникает из-за неразрывных пробелов (& nbsp;), вставляемых непосредственно перед последним тегом span.

Вот несколько изображений, которые я вытащил из вашего примера плунжера, чтобы показать это. введите описание изображения здесь

Каким-то образом теги span генерируются с пустыми символами пробела.

enter image description here

Может ли ваша логика усечения как-то разрешить преобразование пустых строк или пробелов в эти теги span с неразрывными пробелами? Это может быть основной причиной ваших проблем с отображением. Надеюсь, это поможет.

1
JohnH 7 Сен 2017 в 12:45