Text-overflow: Еліпсис вважається шкідливим

Перевидано Платоном

читають: 0

Є кілька законних випадків використання цієї техніки. Наприклад, у вас може бути таблиця з заголовками та описами. Щоб зберегти більше місця для заголовка, ви обмежуєте опис одним рядком на малих вікнах перегляду до одного рядка та повторюєте опис на сторінці докладної інформації для цього елемента.

Однак я часто бачу, як його використовують на таких елементах, як кнопки чи навіть мітки форм, щоб вони виглядали привабливіше (?), або коли вирівнюють їх вертикально. Але коли ви змінюєте вікно перегляду або розмір тексту, кінець тексту зникає.

Я вважаю, що «... якщо використовується в певних ситуаціях» тут належить, але це, звичайно, робить кращу назву допису в блозі без нього. Як каже Ерік, існують законні випадки використання для скорочення тексту. Можливо, лише деякі, але все ж законні.

Кінцева мета — запобігти «втраті» даних це точно може статися в CSS. Текст, який ненавмисно переповнює контейнер, втрачається в тому сенсі, що його там просто немає. І якщо цього тексту там просто немає, користувачі пропустять його, навіть якщо це найкращий і найдосконаліший заклик до дії, коли-небудь опублікований в Інтернеті.

Ерік зазначає, що немає способу скоротити текст text-overflow: ellipsis видно. Як тільки його немає, його немає (хоча програми зчитування екрана, здається, повідомляють про це). Це практично втрачені дані. Ви можете з цим погодитися. Це круто, якщо ви знаєте, що відбувається, і це задумано.

Але ось що сказав Ерік, що спонукало мене поділитися цим:

Не обмежуйте вміст відповідно до вашого дизайну, зробіть свій CSS гнучким, щоб витончено обробляти довші слова.

Знову ти може бути хочуть, щоб вміст відповідав дизайну. Але я, мабуть, сперечаюся, як Ерік, що дизайн повинен адаптуватися до змісту а не навпаки. Мені важко пригадати будь-яку ситуацію, коли текст на сторінці є неважливим або безцільним до такої міри, що я б спокійно обрізав його в будь-якій довільній точці, визначеній властивістю CSS. Можливо, архів публікацій блогу, де кожна публікація показує уривок вмісту публікації перед скороченням, але це не зовсім випадок використання для text-overflow: ellipse.

CSS має інструменти для створення гнучкого дизайну, який враховує різну довжину тексту. Тому, можливо, помилилися написання захисного CSS… CSS, який передбачає проблеми та знає, як витончено обробляти різні сценарії вмісту. text-overflow: ellipsis може бути частиною вашого арсеналу CSS для цього. Але це також може бути викидання дитини разом з водою для ванни. Варто запитати, чи втрата цих даних коштує вартості того, що цей вміст має робити, перш ніж стригти його.

Поки ми говоримо про скорочення тексту…

посилання 1 жовтня 2021 р