Обработка короткого и длинного контента в CSS

Обработка короткого и длинного контента в CSS

От автора: при создании макета в CSS важно учитывать и тестировать краткий и длинный текстовый контент. Четкое представление о том, что делать, если текст различается по длине, может предотвратить множество нежелательных проблем.

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

Проблема

Прежде чем переходить к методам обработки текстового содержимого, позвольте мне сначала рассказать о проблеме. Предположим, у нас есть вертикальная навигация.

Обработка короткого и длинного контента в CSS

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

следует ли нам обрезать текст?

должны ли мы разбить его на несколько строк? Если да, каково максимальное количество строк для переноса?

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

Обработка короткого и длинного контента в CSS

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

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

Обработка короткого и длинного контента в CSS

Кнопка с текстом «ок» очень маленькая по ширине. Я не говорю, что это фатальная проблема, но кнопка может выглядеть незаметной.

Что делать в таком случае? Может быть, установить минимальную ширину кнопки? Это может обеспечить безопасную ширину независимо от длины содержимого.

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

Длинный контент

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

Overflow Wrap

Свойство overflow-wrap помогает браузеру установить разрыв, если слово не помещается в свой контейнер.

Обработка короткого и длинного контента в CSS

Дефисы

Свойство CSS, которое позволяет браузеру решать, как следует переносить слова, когда текстовое содержимое переносится на несколько строк. Расстановку переносов можно выполнить вручную, вставив HTML-символ, который поможет браузеру расставить слова через перенос.

Обработка короткого и длинного контента в CSS

Тем не менее, важно помнить, что hyphens: auto переносит любое слово, не помещающееся в строку. Что это значит? См. Рисунок ниже.

Обработка короткого и длинного контента в CSS

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

Усечение текста

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

Обработка короткого и длинного контента в CSS

Нет никакого свойства text-truncation или чего-то подобного, но это микс некоторых свойств CSS, которые делают эту работу за нас.

Усечение многострочного текста

Если вы хотите усечение нескольких строк, вам следует использовать свойство line-clamp.

Чтобы этот метод работал, необходимо использовать display: -webkit-box. -webkit-line-clamp указывает максимальное количество строк для работы усечения.

Обработка короткого и длинного контента в CSS

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

Обработка короткого и длинного контента в CSS

Горизонтальная прокрутка

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

Обработка короткого и длинного контента в CSS

Отступ

В некоторых случаях вы можете забыть добавить отступ (padding), пока не заметите визуальную проблему. Обратите внимание на следующее:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Обработка короткого и длинного контента в CSS

У нас есть список флажков, и один из них очень близок к своему родственному элементу. Причина, по которой это произошло, в том, что в сетке нет зазора. Это реальный пример с сайта Techcrunch.

Краткий контент

Я знаю, что это встречается не так уж часто, но это важно учитывать при разработке и создании пользовательского интерфейса.

Установка минимальной ширины

Вернемся к примеру, который я показал вам в начале статьи. Как мы можем улучшить это и сделать кнопку лучше?

Обработка короткого и длинного контента в CSS

Мы можем решить эту проблему, просто добавив к кнопке минимальную ширину. Таким образом, ширина не будет меньше указанной.

Обработка короткого и длинного контента в CSS

Теперь, когда у вас есть представление о проблеме и ее решениях, давайте рассмотрим некоторые варианты использования и примеры из Интернета.

Примеры использования

Карточка профиля

Это типичный пример длинного контента. Трудно предсказать длину имени. Что с этим делать?

Обработка короткого и длинного контента в CSS

Вы можете обрезать текст до одной строки или выполнить обрезку только в том случае, если текст состоит из двух строк.

Элементы навигации

При работе с многоязычным макетом длина содержимого изменится. Рассмотрим следующий пример:

Обработка короткого и длинного контента в CSS

Элемент навигации «About» больше в LTR (слева направо) по сравнению с RTL (справа налево). В RTL элемент выглядит слишком маленьким. Небольшая интерактивная область — не лучший вариант для UX. Что мы можем сделать? В таком случае будет лучше установить минимальную ширину для элемента навигации.

Обработка короткого и длинного контента в CSS

Содержание статьи

Длинное слово или ссылка — обычное дело, особенно на мобильных устройствах. Обратите внимание на следующее:

Обработка короткого и длинного контента в CSS

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

Корзина покупателя

Название продукта может варьироваться от одного слова до нескольких строк. В этом примере название продукта расположено слишком близко к кнопке удаления из-за недостаточного расстояния между ними.

Обработка короткого и длинного контента в CSS

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

Flexbox и длинный контент

Существует поведение, которое связано с flexbox и длинным содержимым, которое вызывает переполнение элементом его родительским. Рассмотрим следующий пример:

Обработка короткого и длинного контента в CSS

Однако если контент длинный, это не сработает. Текст выйдет за пределы контейнера.

Обработка короткого и длинного контента в CSS

Причина в том, что гибкие элементы не сжимаются ниже минимального размера содержимого. Чтобы решить эту проблему, нам нужно установить min-width: 0 для гибкого элемента .user__meta.

Обработка короткого и длинного контента в CSS

Заключение

Я надеюсь, что вы узнали о различных методах работы с коротким и длинным контентом в CSS. Мне понравилось работать над этой статьей, поскольку она обновила некоторые мелкие детали и будет хорошим напоминанием для меня в некоторых будущих проектах.

Автор: Ahmad Shadeed

Источник: ishadeed.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.