Обрезка текста в Tilda: многоточие и одинаковая длина описаний

В одной карточке название занимает строку, в другой — четыре. Из-за этого кнопки и подписи оказываются на разной высоте, а список выглядит неровно. Необязательно сокращать все названия вручную: можно ограничить число видимых строк.

Разберём, как настроить такую обрезку в Tilda, оставить больше места для текста на телефоне и не спрятать от посетителя важные подробности.

Ограничение удобно для анонсов статей, названий услуг и коротких описаний в каталоге. Например, заголовку можно оставить две строки, описанию — три. Это отправная точка для примерки, а не правило для любого сайта.

Сначала прочитайте самые длинные карточки. Если после обрезки исчезает главное отличие товара или условия предложения, лучше изменить текст либо саму карточку. Цену, ограничения и предупреждения не стоит прятать ради ровного ряда. У посетителя должен оставаться понятный способ узнать подробности.

Откройте конструктор обрезки текста и создайте отдельную группу для каждого типа текста. Заголовкам и анонсам обычно нужны разные ограничения. Выберите подходящие элементы стандартного блока или укажите их CSS-селекторы — записи, по которым код находит нужные надписи.

Не выбирайте весь контейнер карточки: вместе с описанием в него могут попасть цена и кнопка. Если оформление нужно только одному каталогу, ограничьте выбор его блоком. После добавления группы проверьте несколько карточек, включая ту, где название длиннее остальных.

В каждой группе задайте предел строк. Конструктор поддерживает значения от 1 до 30. Начните с небольшого набора карточек и посмотрите, можно ли понять названия без перехода внутрь. Затем проверьте перенос длинных слов и вариант переносов с дефисом.

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

Если на телефоне карточки становятся узкими, включите мобильное ограничение в нужной группе. Укажите ширину, до которой оно действует, и количество строк. Можно оставить описанию больше строк, чтобы оно сохраняло смысл, или сделать короткий анонс, если рядом уже есть понятный заголовок.

Посмотрите несколько размеров окна, а не только один телефонный макет. Особенно полезны промежуточные ширины: именно там длинное слово часто переезжает на дополнительную строку. Проверьте и короткое описание — оно не должно превращаться в искусственно растянутый текст.

Добавьте полученный код в T123 после блоков с выбранными надписями и опубликуйте страницу. Само содержимое остаётся в Tilda: мод ограничивает его видимую область, а не переписывает названия в редакторе.

Встроенной кнопки «Читать далее» у этого мода нет. Для статьи оставьте ссылку на отдельную страницу, для товара — обычный переход в карточку. Не рассчитывайте, что нажатие на многоточие раскроет описание. Сначала проверьте весь путь посетителя: увидел анонс, понял тему, открыл подробности и нашёл там полный текст.

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

• Проверьте самый длинный заголовок, обычное описание и слово без пробелов.
• Откройте страницу на телефоне и измените ширину окна на компьютере.
• Если каталог подгружает новые карточки, проверьте их после загрузки.
• Убедитесь, что полный текст можно прочитать по доступной ссылке.

Читайте также: Сетка товаров в Tilda: как настроить карточки в ряд на разных экранах · Галерея как в Pinterest на Tilda: сетка и увеличение фото.