Обрезка текста с использованием overflow в CSS

Введение

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

Skills Graph

Обрезка текста

В ВМ уже предоставлены index.html и style.css.

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

• overflow: hidden, чтобы предотвратить выход текста за его размеры
• white-space: nowrap, чтобы предотвратить превышение текста одной строкой по высоте
• text-overflow: ellipsis, чтобы добавить многоточие, если текст превышает свои размеры
• Укажите фиксированную width для элемента, чтобы знать, когда отображать многоточие

Обратите внимание, что этот метод работает только для элементов в одной строке. Например:

<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>

.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
}

Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

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