LabEx
ВходРегистрация

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

Beginner

This tutorial is from open-source community. Access the source code

Введение

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

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

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

В ВМ уже предоставлены 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, чтобы улучшить свои навыки.