Я нашел замечательную библиотеку усечения 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);
}
}`
Что дает мне то, что я хочу для многострочного текста, но затем нарушает исходную функциональность для блока текста, как показано в плунжере. Как я могу заставить эту функцию работать для двух случаев. Я все еще хочу, чтобы Показать больше появлялось в желтой части, когда эти два сообщения находятся на одной странице.
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
Вы пытаетесь получить усечение, чтобы сократить уже короткий блок текста. Строка упоминания не достаточно длинная, чтобы ее можно было разорвать, поэтому она переносится на новую строку, и нет никакого контента, который нужно урезать при достижении новой строки. Если вы удалите элементы div, которые форсируют короткие строки, то содержимое достигает конца строки и переносится, как вы ожидаете. Когда вы добавляете «showmore» перед предыдущим элементом, он не работает вообще, если есть только один элемент, как в случае вашего второго абзаца. Лишние пробелы, упомянутые @JohnH, делают форматирование уродливым, но не вызывают разрыв.
Я не уверен, что понимаю вашу цель, но я думаю, что вы пытаетесь сделать интервал более согласованным для повторяющихся тегов span с текстом "@Abide Masaraure".
Если это так, я предлагаю изучить сгенерированный HTML-код с помощью функции проверки Chrome или аналогичной функции из другого браузера.
Кажется, что нечетный интервал возникает из-за неразрывных пробелов (& nbsp;), вставляемых непосредственно перед последним тегом span.
Вот несколько изображений, которые я вытащил из вашего примера плунжера, чтобы показать это. 
Каким-то образом теги span генерируются с пустыми символами пробела.
Может ли ваша логика усечения как-то разрешить преобразование пустых строк или пробелов в эти теги span с неразрывными пробелами? Это может быть основной причиной ваших проблем с отображением. Надеюсь, это поможет.