Есть ли у кого-нибудь более изощренное решение / библиотека для усечения строк с помощью JavaScript и добавления многоточия к концу, чем очевидное:
if (string.length > 25) {
string = string.substring(0, 24) + "...";
}
javascript
string
truncation
naltatis
источник
источник
Ответы:
По сути, вы проверяете длину данной строки. Если он длиннее заданной длины
n
, обрежьте его по длинеn
(substr
илиslice
) и добавьте html-сущность…
(…) в обрезанную строку.Такой метод выглядит
Если под «более сложным» подразумевается усечение на границе последнего слова строки, то вам нужна дополнительная проверка. Сначала вы обрезаете строку до желаемой длины, затем вы обрезаете результат этого до последней границы слова
Вы можете расширить собственный
String
прототип своей функцией. В этом случаеstr
параметр должен быть удален иstr
внутри функции должен быть заменен наthis
:Более догматические разработчики могут сильно вас капитулировать (« Не изменяйте объекты, которые вам не принадлежат ». Я бы не возражал).
Подход без расширения
String
прототипа заключается в создании собственного вспомогательного объекта, содержащего предоставленную (длинную) строку и вышеупомянутый метод для ее усечения. Вот что делает фрагмент ниже.Показать фрагмент кода
Наконец, вы можете использовать css только для усечения длинных строк в узлах HTML. Это дает вам меньше контроля, но вполне может быть жизнеспособным решением.
Показать фрагмент кода
источник
substr
- это длина, поэтому следуетsubstr(0,n)
ограничить его до первыхn
символов.…
фактический многоточие (...
) в вашем примере кода. Если вы пытаетесь использовать это для взаимодействия с API, вам понадобится не-HTML-сущность.Обратите внимание, что это нужно сделать только для Firefox.Все
остальныебраузеры поддерживают решение CSS (см. Таблицу поддержки ):Ирония в том, что я получил этот фрагмент кода от Mozilla MDC.
источник
white-space: nowrap;
). Когда дело касается нескольких строк, вы застряли в JavaScript.Your picture ('some very long picture filename truncated...') has been uploaded.
Есть веские причины, по которым люди могут захотеть сделать это на JavaScript вместо CSS.
Чтобы усечь до 8 символов (включая многоточие) в JavaScript:
или
источник
.replace(/^(.{7}).{2,}/, "$1…");
вместо этогоlong
иshort
зарезервированы как будущие ключевые слова в соответствии со старыми спецификациями ECMAScript (ECMAScript 1–3). См. MDN: будущие зарезервированные ключевые слова в старых стандартахИспользуйте либо усечение Лодаша
или усечение строки underscore.string .
источник
Каким-то образом приведенный выше код не работал для некоторого текста, вставленного или написанного в приложении vuejs. Поэтому я использовал lodash truncate, и теперь он работает нормально.
источник
Вот мое решение, которое имеет несколько улучшений по сравнению с другими предложениями:
Это:
источник
Лучшая функция, которую я нашел. Отдача на текст-многоточие .
Примеры :
источник
Все современные браузеры теперь поддерживают простое решение CSS для автоматического добавления многоточия, если строка текста превышает доступную ширину:
(Обратите внимание, что для этого требуется, чтобы ширина элемента была каким-то образом ограничена.)
Основано на https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ .
Следует отметить, что этот подход не ограничивает количество символов. Это также не работает, если вам нужно разрешить несколько строк текста.
источник
text-direction: rtl
иtext-align: left
. См. Davidwalsh.name/css-ellipsis-leftБольшинство современных Javascript-фреймворков ( JQuery , Prototype и т. Д. ) Имеют встроенную функцию String, которая обрабатывает это.
Вот пример в Prototype:
Это похоже на одну из тех функций, которые вы хотите, чтобы кто-то еще имел дело с / поддерживал. Я бы позволил фреймворку справиться с этим, а не писать больше кода.
источник
truncate()
тоже не имеет - вам может понадобиться расширение, такое как underscore.string ._.trunc
именно это.Возможно, я пропустил пример, когда кто-то обрабатывает нули, но 3 ТОП-ответа не сработали для меня, когда у меня были нули (Конечно, я понимаю, что обработка ошибок и миллионы других вещей НЕ являются обязанностью человека, отвечающего на вопрос, но так как Я использовал существующую функцию вместе с одним из превосходных ответов об усеченном многоточии, которые, как я думал, я предоставлю для других.
например
JavaScript:
используя функцию усечения
Тем не менее, на news.comments, являющихся нулевыми, это "сломается"
окончательный
Функция усечения любезно предоставлена KooiInc
Моя простая проверка нуля (тоже проверяет наличие буквального «нуля» (это ловит неопределенные, «», нуля, «нуля» и т. Д.)
источник
Иногда имена файлов нумеруются, где индекс может находиться в начале или в конце. Поэтому я хотел сократить от центра строки:
Имейте в виду, что я использовал здесь символ заполнения с более чем 1 байтом в UTF-8.
источник
Переполнение текста: многоточие - это свойство, которое вам нужно. С этим и переполнением: скрыто с определенной шириной, все, что превосходит, что получит эффект трех периодов в конце ... Не забудьте добавить пробел: nowrap или текст будет помещен в несколько строк.
источник
Вы можете использовать функцию Ext.util.Format.ellipsis, если вы используете Ext.js.
источник
Я проголосовал за решение Kooilnc. Действительно хорошее компактное решение. Есть один маленький крайний случай, который я хотел бы рассмотреть. Если кто-то вводит действительно длинную последовательность символов по какой-либо причине, она не будет усечена:
источник
С быстрым поиском в Google я нашел это ... Это работает для вас?
источник
Ответ c_harm, на мой взгляд, лучший. Обратите внимание, что если вы хотите использовать
вам придется использовать конструктор объекта regexp, а не литерал. Также вам придется избежать
\S
при конвертации.источник
Используйте следующий код
источник
Исправление решения Kooilnc:
Это возвращает строковое значение вместо объекта String, если его не нужно усекать.
источник
Я недавно должен был сделать это и закончил с:
Чувствует себя хорошо и чисто для меня :)
источник
Мне нравится использовать .slice () Первый аргумент - это начальный индекс, а второй - конечный. Все, что между ними, - это то, что вы получите.
источник
Где-то Смарт: D
источник
Эта функция также усекает пространство и слова. (Например: Мать в Мотылек ...)
использование:
вывод:
источник