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

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

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

Проблема

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

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

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

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

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

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

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

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

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

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

Overflow Wrap

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

.card { overflow-wrap: break-word;
}

Дефисы

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

.element { hyphens: auto;
}

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

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

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

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

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

.element { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

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

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

.element { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

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

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

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

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

.code { overflow-x: auto;
}

Отступ

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

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

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

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

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

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

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

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

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

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

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

/* Solution 1 */
.card__title { text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
} /* Solution 2 */
.card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

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

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

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

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

.nav__item { min-width: 50px;
}

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

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

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

.article-content p { overflow-wrap: break-word;
}

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

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

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

.product__name { margin-right: 1rem;
}

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

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

<div class="user"> <div class="user__meta"> <h3 class="user__name">Ahmad Shadeed</h3> </div> <button class="btn">Follow</button>
</div>

.user { display: flex; align-items: flex-start;
} .user__name { text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}

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

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

.user__meta { /* other styles */ min-width: 0;
}

Заключение

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

Автор: Ahmad Shadeed

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

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