Обрезка текста (text-overflow, ellipsis): Тренажер CSS

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

В этом разделе вы попрактикуетесь в использовании CSS свойств для управления отображением текста, который не помещается в свой контейнер. Основное внимание будет уделено свойству `text-overflow` со значением `ellipsis`, которое позволяет обрезать текст и добавлять многоточие (...) в конце. Вы научитесь применять это свойство в различных ситуациях, от простого однострочного текста до более сложных случаев, требующих дополнительных свойств для корректной работы обрезки. Задания построены от простого к сложному, чтобы вы могли постепенно закрепить материал.

Список тем

Простая обрезка текста

У вас есть параграф с длинным текстом, который не помещается в контейнер фиксированной ширины. Ваша задача — сделать так, чтобы текст обрезался и в конце строки отображалось многоточие (...). Текст должен оставаться на одной строке.

CSS

.container {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}

.truncate-text {
  /* Предотвращаем перенос текста */
  input1: input2;
  /* Скрываем текст, выходящий за пределы */
  input3: hidden;
  /* Добавляем многоточие */
  input4: ellipsis;
}

                     .container {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}

.truncate-text {
  /* Предотвращаем перенос текста */
  input1: input2;
  /* Скрываем текст, выходящий за пределы */
  input3: hidden;
  /* Добавляем многоточие */
  input4: ellipsis;
}

HTML

<div class="container">
  <p class="truncate-text">Это очень длинный текст, который определенно не поместится в контейнер заданной ширины, и его нужно красиво обрезать с многоточием в конце.</p>
</div>

Чтобы текст обрезался с многоточием, необходимо использовать свойство `text-overflow` со значением `ellipsis`. Однако это свойство работает только при выполнении двух других условий: текст не должен переноситься на новую строку (`white-space: nowrap;`) и все, что выходит за пределы контейнера, должно быть скрыто (`overflow: hidden;`). Добавьте все три свойства к селектору `.truncate-text`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Обрезка текста: Необходимые условия

В этом задании свойство `text-overflow: ellipsis;` уже добавлено, но обрезка текста не работает. Вам нужно добавить два недостающих свойства, без которых `text-overflow: ellipsis;` не будет иметь эффекта. Добейтесь обрезки текста с многоточием.

CSS

.card {
  width: 250px;
  border: 1px solid #eee;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  padding: 15px;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  /* Добавьте свойство для скрытия переполнения */
  input1: hidden;
  /* Добавьте свойство для запрета переноса строки */
  input2: nowrap;
  /* Это свойство уже есть, но без других оно не работает */
  text-overflow: ellipsis;
}

                     .card {
  width: 250px;
  border: 1px solid #eee;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  padding: 15px;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  /* Добавьте свойство для скрытия переполнения */
  input1: hidden;
  /* Добавьте свойство для запрета переноса строки */
  input2: nowrap;
  /* Это свойство уже есть, но без других оно не работает */
  text-overflow: ellipsis;
}

HTML

<div class="card">
  <h3 class="card-title">Очень длинный заголовок карточки, который нужно обрезать</h3>
  <p>Краткое описание под заголовком.</p>
</div>

Свойство `text-overflow: ellipsis;` требует, чтобы элемент имел `overflow` со значением `hidden` (или `scroll`, `auto`, но `hidden` наиболее частый случай для `ellipsis`) и `white-space` со значением `nowrap`. Добавьте эти два свойства к элементу с классом `.card-title`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Обрезка текста для блочных элементов

Обрезка текста обычно применяется к блочным (`display: block`) или инлайн-блочным (`display: inline-block`) элементам, у которых есть определенная ширина. В данном примере есть `<span>`, который по умолчанию является инлайн-элементом. Примените необходимые стили, чтобы текст внутри `<span>` обрезался с многоточием.

CSS

.label {
  padding: 5px 10px;
  background-color: #e0e0e0;
  border-radius: 4px;
  /* Измените тип отображения */
  display: input1;
  /* Задайте максимальную ширину, например 150px */
  width: 150px;
  /* Добавьте необходимые свойства для обрезки */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Добавляем vertical-align для inline-block */
  vertical-align: middle; /* Это необязательно для input, но полезно знать */
}

                     .label {
  padding: 5px 10px;
  background-color: #e0e0e0;
  border-radius: 4px;
  /* Измените тип отображения */
  display: input1;
  /* Задайте максимальную ширину, например 150px */
  width: 150px;
  /* Добавьте необходимые свойства для обрезки */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Добавляем vertical-align для inline-block */
  vertical-align: middle; /* Это необязательно для input, но полезно знать */
}

HTML

<div>
  Имя файла: 
  <span class="label">ОченьДлинноеИмяФайлаБезПробеловКотороеНужноОбрезать.jpeg</span>
</div>

Инлайн-элементы (`span`) по умолчанию принимают ширину своего содержимого и не могут иметь фиксированную ширину или `overflow: hidden`. Чтобы применить обрезку, измените тип отображения элемента на `block` или `inline-block` и задайте ему ширину. Затем добавьте свойства `white-space: nowrap`, `overflow: hidden` и `text-overflow: ellipsis`. В данном случае достаточно изменить `display` и добавить `width`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Обрезка текста в несколько строк (Webkit)

Стандартный `text-overflow: ellipsis` работает только для одной строки. Однако существует нестандартный (но широко поддерживаемый) способ обрезать текст по достижении определенного количества строк с помощью свойств Webkit. Ваша задача — обрезать текст в параграфе так, чтобы он занимал не более 3 строк, а в конце последней видимой строки стояло многоточие.

CSS

.multi-line-clamp {
  border: 1px dashed blue;
  padding: 5px;
  width: 300px;
  /* Добавьте свойство для скрытия переполнения */
  input1: hidden;
  /* Устанавливаем режим flex-контейнера webkit */
  display: input2;
  /* Устанавливаем вертикальную ориентацию */
  input3: vertical;
  /* Ограничиваем количество строк */
  input4: 3;
}

                     .multi-line-clamp {
  border: 1px dashed blue;
  padding: 5px;
  width: 300px;
  /* Добавьте свойство для скрытия переполнения */
  input1: hidden;
  /* Устанавливаем режим flex-контейнера webkit */
  display: input2;
  /* Устанавливаем вертикальную ориентацию */
  input3: vertical;
  /* Ограничиваем количество строк */
  input4: 3;
}

HTML

<p class="multi-line-clamp">
  Это очень длинный текст, который должен быть обрезан после трех строк с использованием нестандартных свойств Webkit. Этот метод полезен для описаний или анонсов статей, где нужно показать только начало текста, не занимая слишком много места на странице. Убедитесь, что многоточие появляется в конце третьей строки.
</p>

Для многострочной обрезки с использованием Webkit-свойств вам понадобятся: `display: -webkit-box;`, `-webkit-box-orient: vertical;`, `-webkit-line-clamp: N;` (где N — количество строк) и `overflow: hidden;`. Замените `N` на 3 в свойстве `-webkit-line-clamp` и добавьте остальные необходимые свойства.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комбинированное применение обрезки

В этом задании у вас есть карточка с заголовком и описанием. Оба текста могут быть слишком длинными. Примените однострочную обрезку с многоточием к заголовку (`h4`) и многострочную обрезку (максимум 2 строки) к описанию (`p`) внутри элемента с классом `.card-body`.

CSS

.card-complex {
  width: 320px;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden; /* Для скругления углов картинки */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-complex img {
  display: block;
  width: 100%;
  height: auto;
}
.card-body {
  padding: 15px;
}

/* Стили для заголовка */
.card-body h4 {
  margin: 0 0 10px 0;
  font-size: 1.2em;
  input1: nowrap;
  input2: hidden;
  input3: ellipsis;
}

/* Стили для описания */
.card-body p {
  margin: 0;
  color: #555;
  line-height: 1.4;
  /* Свойства для многострочной обрезки */
  overflow: hidden;
  display: input4;
  input5: vertical;
  input6: 2;
}

                     .card-complex {
  width: 320px;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden; /* Для скругления углов картинки */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-complex img {
  display: block;
  width: 100%;
  height: auto;
}
.card-body {
  padding: 15px;
}

/* Стили для заголовка */
.card-body h4 {
  margin: 0 0 10px 0;
  font-size: 1.2em;
  input1: nowrap;
  input2: hidden;
  input3: ellipsis;
}

/* Стили для описания */
.card-body p {
  margin: 0;
  color: #555;
  line-height: 1.4;
  /* Свойства для многострочной обрезки */
  overflow: hidden;
  display: input4;
  input5: vertical;
  input6: 2;
}

HTML

<div class="card-complex">
  <img src="https://naytikurs.ru/img/7.png" alt="Card image">
  <div class="card-body">
    <h4>Очень-очень длинный заголовок для этой замечательной карточки</h4>
    <p>Это описание карточки содержит довольно много текста. Нам нужно убедиться, что оно не будет занимать слишком много места и будет аккуратно обрезано после второй строки, если не помещается полностью.</p>
  </div>
</div>

Для заголовка (`.card-body h4`) используйте стандартный однострочный метод: `white-space: nowrap;`, `overflow: hidden;`, `text-overflow: ellipsis;`. Для описания (`.card-body p`) используйте метод Webkit для многострочной обрезки: `display: -webkit-box;`, `-webkit-box-orient: vertical;`, `-webkit-line-clamp: 2;`, `overflow: hidden;`. Не забудьте правильно составить селекторы.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Тонкая настройка селектора для обрезки

Иногда нужно применить обрезку текста только к определенному элементу внутри более сложной структуры. В данном примере есть список ссылок. Примените однострочную обрезку текста с многоточием только к тексту внутри ссылок (`a`), которые находятся внутри элемента списка с классом `.important-links`.

CSS

ul.important-links {
  list-style: none;
  padding: 0;
  width: 250px;
  border: 1px solid #ddd;
}

ul.important-links li {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
}
ul.important-links li:last-child {
  border-bottom: none;
}

/* Селектор для ссылок внутри списка */
input1 {
  /* Чтобы можно было задать ширину и обрезку */
  display: block;
  max-width: 100%; /* Ограничим ширину контейнером li */
  color: #007bff;
  text-decoration: none;
  /* Свойства для обрезки */
  white-space: input2;
  overflow: input3;
  text-overflow: input4;
}

input1:hover {
  text-decoration: underline;
}

                     ul.important-links {
  list-style: none;
  padding: 0;
  width: 250px;
  border: 1px solid #ddd;
}

ul.important-links li {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
}
ul.important-links li:last-child {
  border-bottom: none;
}

/* Селектор для ссылок внутри списка */
input1 {
  /* Чтобы можно было задать ширину и обрезку */
  display: block;
  max-width: 100%; /* Ограничим ширину контейнером li */
  color: #007bff;
  text-decoration: none;
  /* Свойства для обрезки */
  white-space: input2;
  overflow: input3;
  text-overflow: input4;
}

input1:hover {
  text-decoration: underline;
}

HTML

<ul class="important-links">
  <li><a href="#">Очень длинная ссылка номер один, которая должна быть обрезана</a></li>
  <li><a href="#">Короткая ссылка</a></li>
  <li><a href="#">Еще одна чрезвычайно длинная ссылка, которая тоже не помещается</a></li>
  <li><a href="#">Последняя ссылка для примера</a></li>
</ul>

Вам нужно составить CSS-селектор, который выберет только теги `a`, находящиеся внутри `li`, который в свою очередь находится внутри `ul` с классом `.important-links`. Затем к этому селектору примените стандартный набор свойств для однострочной обрезки: `display: block` (или `inline-block`, так как `a` - инлайновый по умолчанию), `width` (или `max-width`), `white-space: nowrap`, `overflow: hidden`, `text-overflow: ellipsis`. Задайте `max-width`, чтобы ссылка не растягивала родительский `li`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку