Характеристики товара не читаются на телефоне: как сократить строку и сохранить смысл

Почему проблема начинается раньше CSS

В учебной карточке списка показано свойство «Диапазон рабочего напряжения питания: от 24 до 48 вольт постоянного тока». На телефоне оно занимает несколько строк и вытесняет цену. Разработчик может уменьшить шрифт, но это ухудшит чтение всех свойств. Прежде стоит проверить содержание: покупателю в выдаче, возможно, достаточно строки «Питание: 24–48 В DC», если обозначения понятны его аудитории и полное описание доступно в карточке.

Сокращение должно сохранять технический смысл. Нельзя выбросить знак допуска, тип тока, условие температуры или единицу только ради красивой высоты. У похожих товаров именно эта часть может определять совместимость. Поэтому решение принимают вместе с человеком, который понимает ассортимент. Дизайнер задаёт ограничения, а предметный специалист подтверждает, какие обозначения допустимы и что нельзя сокращать.

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

Какие свойства нужны в списке

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

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

Краткая форма может быть отдельным редакторским полем, если её нельзя надёжно получить автоматически. Автоматическое удаление «лишних» слов по словарю опасно для технических характеристик. Безопаснее иметь понятный договор данных: полное значение хранится неизменным, краткое редактируется отдельно, пустая краткая форма использует согласованный запасной вывод. Это также упрощает перевод и повторный импорт.

Перенос и обрезание решают разные задачи

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

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

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

Полное значение должно оставаться доступным

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

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

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

Согласованность выдачи и карточки

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

В учебном каталоге меняют диапазон питания товара и повторно открывают список и карточку. Затем загружают обновление через импорт, если он участвует в реальном процессе. Сравнивают текст и единицы. Локализованный шаблон может переводить название свойства, но оставить значение в другом формате. Так появляется несогласованность, которую невозможно исправить одной шириной блока.

Если значение зависит от выбранного варианта товара, карточка списка должна показывать согласованное обобщение или конкретный вариант. Нельзя выводить характеристику первого случайного предложения без подписи. Варианты «от…», «несколько исполнений» или явный выбор модели могут быть полезны, но требуют проверенного содержания. Статья не задаёт универсальный шаблон для всех категорий; она предлагает проверить происхождение каждой видимой строки.

Увеличенный текст важнее идеальной высоты карточек

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

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

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

Редакторские ограничения без неприятных сюрпризов

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

Не следует автоматически резать сохранённое значение на сервере без уведомления. Так можно потерять данные, которые редактор рассчитывал сохранить. Лучше отклонить неподходящую краткую форму с понятной причиной либо оставить полный исходник и показать, как он будет сокращён в интерфейсе. Выбранное поведение должно быть одинаковым при ручном вводе и импорте, если оба пути обновляют это поле.

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

Как измерить качество исправления

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

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

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

Что оставить в инструкции по контенту

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

Работа заканчивается, когда компактная карточка помогает выбрать товар и не скрывает существенные параметры. Устойчивое решение объединяет редакционную модель и адаптивную вёрстку. Оно не сводится к одному свойству CSS, поскольку следующая импортированная характеристика всё равно проверит, насколько ясно определено содержание короткой строки.

Сравнение трёх вариантов одной строки

Для учебного свойства готовят полный текст, редакционное сокращение и обрезанную CSS строку. Затем дают два похожих товара, различающихся существенным условием в конце значения. Если обрезанный вариант скрывает именно это условие, он не подходит, даже если карточка стала аккуратнее. Редакционное сокращение принимают только после проверки смысла. Полный вариант остаётся доступным через выбранное действие, не зависящее от наведения.

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

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

Смежная тема разобрана в материале Мобильная версия интернет-магазина: проверка перед запуском.

Вопросы по теме

Как показать характеристики компактно, не делая их нечитабельными?

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

Документация и источники

• MDN: overflow-wrap: Управление переносом длинного содержимого; выбор сокращений показан на учебной модели.