JavaScript отображает эффект ellipsis после превышения контейнера
В реальных проектах, из -за неопределенности длины текстового содержимого и фиксированности макета страницы, неизбежно, что текстовое содержимое превысит область Div (или другие теги, то же самое ниже). Лучшим способом в настоящее время является автоматическое отображение его в эллипсе (…), когда текст превышает ограниченную ширину Div. Таким образом, согласно обычаю, люди будут знать, что здесь есть тексты, которые опущены. В CSS есть свойство под названием Text-Overflow: Ellipsis; Например, вы можете написать это так, используя CSS:
{ширина: 27ем; Белое пространство: Nowrap; Текст-переполнение: ellipsis; -О-текст-переполнение: ellipsis; переполнение: скрыто;} Эллипсис текста не может быть реализован только в браузере Firefox, и текст непосредственно отбрасывается с середины. Я не говорю о том, как использовать CSS для реализации этого. Конкретная реализация CSS может использоваться на Baidu. Самое важное здесь - как реализовать его с помощью JS и как написать простой компонент через JS. Я могу напрямую вызвать метод инициализации JS для его реализации! Например, следующие эффекты:
Точки и точки в задней части подсказывают пользователю, что существует больше контента, который не был отображен, чтобы завершить такой эффект!
Сначала скажи меньше ерунды! Во -первых, давайте посмотрим на демонстрационный эффект, который я сделал, и вы поймете, что это такое!
Если вы хотите увидеть эффект, пожалуйста, нажмите меня! ХОРОШО?
1: Сначала посмотрим на элементы конфигурации компонента:
TargetCls
NULL, необходимые элементы для перехвата контейнера целевой
LimitlineNumber 1, количество отображаемых строк по умолчанию составляет 1 строку
Тип '...', тип, который превышает длину контейнера, отображается по умолчанию в Ellipsis
Lineheight 18, высота строки по умолчанию узла DOM составляет 18
isshowtitle true, заголовок требуется для отображения всего содержимого. По умолчанию верно
Ischarlimit ложные ограничения для отображения эллипсиса на основе длины символа
MaxLength 20 Длина по умолчанию составляет 20. Эллипсис будет отображаться после превышения символа 20.
Два: анализ
1. Во -первых, давайте поговорим об этом компоненте: поддержат два способа перехвата строк. Во -первых: перехватить в соответствии с длиной символов и отображать эллипсис после их превышения. Например, я называю это так:
новый мультиллипс ({
"TargetCls": '.Text8',
"ischarlimit": правда,
"MaxLength": 18
});
Таким образом, инициализация означает, что Ischarlimit является истинной, что означает перехват с количеством символов. Максимальная длина максимальной длины равна 18. Инициализация таким образом, поскольку код сначала определит, что если Ischarlimit будет правдой, он будет напрямую перехватиться в соответствии с количеством символов, такими как следующий код:
2. Второй тип перехватывается на основе количества строк и высот. Например, высота строки элемента конфигурации по умолчанию составляет 18. Если я хочу отобразить 2 строки, то есть высота h = 18*2. Если высота контейнера составляет 100, то метод перехвата:
Используйте (100 - длина типа - 1), больше ли он 18 × 2, если он больше, чем продолжать перехватывать, иначе он не будет перехватывать, и эффект эллипсиса будет отображаться! Следующий код:
Недостатки: Однако, если вы используете перехват с высоким уровнем ряда, это нормально, если данные относительно невелики, но если есть много данных, таких как высота 500 пикселей или более, это будет относительно влиять на производительность, потому что они должны каждый раз рассчитывать n раз (n означает, что существует много функций, которые петки вызовы).
Все коды JS следующие:
Скопировать код
/ * * Multiellipsis на основе JS * @author tugenhua */ function multiellipsis (опции) {var self = this; self.options = $ .extend ({}, по умолчанию, опции || {}); self._init (); } $ .extend (multiellipsis.prototype, {// page initialization_init: function () {var self = this, cfg = self.options; if (cfg.targetcls == null || $ (cfg.targetcls + "") [0] == not dended) {if window.conole) пусто! ");} return;} if (cfg.isshowtitle) {// Добавить атрибут заголовка, чтобы получить текст элемента var title = self.getText (); $ (cfg.targetcls) .attr ({" Название ": название});} // Если он ограничен символами, а затем вернуть непосредственно без сравнения без сопоставления с высотой; self._compareheight (cfg.lineHeight * cfg.limitlineNumber); if (text.length> cfg.maxlength) {var curtex = text.substring (0, cfg.maxlength); HTML Content напрямую * @method getText {public} */ getText: function () {var self = this, cfg = self.options; CFG = Self.Options; }, / * * Количество строк, проходящих через элемент конфигурации * - это высота строки линии, больше или равна текущей высоте * @method _compareheight {private} * / _compareheight: function (maxlineheight) {var self = this; self._deletext (sell.getText ()); - 1); Self.Options; var defaults = {'targetcls': null, // контейнер, который будет перехвачен целевым значением «limitlineNumber»: 1, // Количество строк, ограниченное количеством рядов* Высота строки линии> = высота контейнера «тип»: '... », // тип, который превышает длину, высота по умолчанию. node'isshowtitle ': true, // независимо от того, отображается ли заголовок весь контент по умолчанию' ischarlimit ': false, // дисплей эллипсис ограничен длиной символа «maxlength»: 20 // по умолчанию составляет 20};Приведенный выше метод отображения эффекта Ellipsis после JavaScript превышает контейнер (совместим с одной линией или несколькими линиями) - это все, что я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.