Все статьи | Блог студента

Как справляться с коротким и длинным контентом в CSS [часть 1]

Эта статья написана нашим студентом. Мнение пользователей иногда может не совпадать с точкой зрения Хекслета
Как справляться с коротким и длинным контентом в CSS [часть 1] главное изображение

Введение


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

В этой статье я хотел бы рассмотреть некоторые способы решения подобных ситуаций.

Суть проблемы


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

Текст может менять свою длину, особенно если вы работаете с многоязычным сайтом. Что нам делать в таком случае: текст должен обрезаться или растягиваться на несколько строк? Если растягиваться, то на сколько?

А что если вся проблема будет в том, что последнее слово в строке будет слишком длинное? Как корректно решить эту проблему? По умолчанию это слово будет переполнять контейнер.

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

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


Теперь давайте более подробно рассмотрим ситуации с переполнением контейнера.

1) Overflow Wrap

CSS свойство overflow-wrap устанавливает браузеру как вести себя в случае того, если какое-то слово слишком длинное и переполняет контейнер.

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

2) Дефисы

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

.element {
  hyphens: auto;
}

3) «Усечение» текста

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

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

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

4) «Усечение» текста из нескольких строк

Если нужно обрезать текст только после определенной строки, то стоит использовать свойство line-clamp, которое, грубо говоря, получается из взаимодействия нескольких CSS свойств:

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

enter image description here

5) Padding

Одна из моих самых больших проблем, пока я не стал понимать в верстке немного лучше: не забывайте добавлять padding. Это очень важное свойство!)

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

enter image description here

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


Тут не так много интересных ситуаций, поэтому я решил обойтись только тем, что напомню вам про великолепное свойство min-width.

До:

enter image description here

После:

enter image description here

Заключение


P.S. Пост получился достаточно немаленьким, решил разбить его на 2 части. В следующей части я опубликую еще пару интересных случаев! :)

Аватар пользователя Александр Ковалец
Александр Ковалец 09 февраля 2021
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
1 декабря 8 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
1 декабря 8 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
1 декабря 8 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
1 декабря 8 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
1 декабря 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Новый
Создает веб-приложения со скоростью света
1 декабря 5 месяцев