Перед тем, как заняться разработкой небольших программ, встречались, чтобы добиться эффекта длинного складного текста (типа круга друзей микроканала). Существует три основных взаимодействия:
- Пусть текст слишком длинный при сгибании, и отображается "полный" Click Text
- Когда пользователь нажимает «Полный текст», свернутый текст расширяется, а кнопка переключается на «Свернуть».
- Отображает нормально для текста, который не слишком длинный
По существу, для достижения этого эффекта необходимо решить две задачи:
- Критерии определения того, является ли текст слишком длинным
- Как свернуть стиль, если текст слишком длинный
Определите, не слишком ли длинный текст
Так называемый текст, который слишком длинный, означает, что высота, занимаемая текстом, слишком велика.Причина судить об этом состоит в том, чтобы указать логическому уровню управлять отображением и переключением кнопки «полный текст». Без этого взаимодействия эту проблему можно полностью игнорировать.
Самый прямой критерий для суждения о том, что текст слишком длинный, состоит в том, что количество строк текста превышает определенное значение. Со стороны браузера высота контейнера и высота строки текста могут быть получены через DOM для расчета количества строк, отображаемых текстом; однако для js нет интерфейса для доступа к количеству строк текста. или высота компонента в апплете, и мы не можем узнать количество строк Сообщите логический слой.
Таким образом, мы можем согласиться только на следующий лучший вариант и использовать количество символов в качестве стандарта для длины текста. Что касается того, сколько символов слишком длинных, вы можете комбинировать ширину контейнера, символы (китайские иероглифы будут занимать две ширины английских символов), шрифт, размер шрифта и согласовать с дизайнером. Но очевидно, что с этим подходом все еще есть проблемы, например, когда количество символов в каждой строке очень мало, все равно будет отображаться много строк, и текст не будет обрабатываться слишком долго, что идет вразрез с нашим первоначальным намерением свернуть слишком длинный текст.
Как свернуть слишком длинный текст
Простая идея состоит в том, чтобы использовать высоту строки для вычисления фиксированной высоты и отображения только первых нескольких строк, но этот метод слишком зависит от реализации стиля и не способствует сопровождению. В апплете мы можем использовать хак-технологию в разработке мобильных страниц:-webkit-line-clamp, это свойство CSS webkit-kernel-private используется для установки количества строк текста, оставшихся в контейнере, при этом остальная часть текста остается в состоянии «переполнения». Тогда просто объединитеtext-overflow: ellipsis;а такжеoverflow: hidden;Он может добиться эффекта отображения только первых нескольких строк слишком длинного текста, то есть «складывания».
-webkit-line-clampЕсть несколько моментов, на которые стоит обратить внимание при использовании:
- совместимость. Он очень надежен в браузерах webkit, таких как Chrome, Safari и QQ. Механизмы рендеринга View WKWebView и X5 апплета WeChat также изменены по сравнению с webkit, и совместимость гарантируется лучше.
- Есть предпосылка для использования этого свойства: в текстовом контейнере должен быть включен частный макет Flex браузера webkit —
display: webkit-box;, и установит расположение дочерних элементов как-webkit-box-orient: vertical; - Собственность рассчитывается на основе количества строк встроенных элементов, количество строк подсчитывает только встроенные элементы
Исходя из третьего пункта, когда речь идет о сегментации текста, чтобы добиться сворачивания по заданному количеству строк, нельзя каждый абзац выводить в блочный элемент (например, вью-компонент). Как это разделить? Хотя апплет не<br>Такого рода вещи, но, к счастью, их текстовый компонент поддерживает escape-символы, мы можем ввести каждый абзац в текстовый компонент и добавить в конце текстового компонента\nдобиться сегментации.
Суммировать
Вышеизложенное резюмирует идею сворачивания слишком длинного текста под апплет: слишком длинный текст определяется количеством символов, оцениваемым логическим слоем, который управляет отображением и переключением кнопки «полный текст». Применять слишком долго-webkit-line-clampСтиль сворачивает текст и снова расширяет текст, просто отмените стиль.