Как ограничить длину текста css

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Иногда бывает ситуация, когда слишком длинный текст неудобно отображать в блоке на странице, но необходимо дать пользователю информацию о том, текст большой. В данной ситуации используется CSS свойство text-overflow. text-overflow работает в том случае, если для блока c данными, задано значение свойства overflow такое как auto, scroll или hidden и white-space: nowrap. Рассмотрим пример.

Исходный HTML документ:

<div class="long-text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

CSS стили:

.long-text {
  /* Делаем видиму границу блока и добавляем внутренний отступ */
  border: 1px solid #245488;
  padding: 10px;

  width: 150px;
  
  /* Эти опции - необходимые условия */
  overflow: hidden;
  white-space: nowrap;
  
  /* Добавляем троеточия в конце предложения, если текст
  не помещается в блок */
  text-overflow: ellipsis;
}

Результат: text-overflow

3 года назад

Вячеслав Межуревский

10 месяцев

QA-инженер по тестированию на Java: с нуля до автоматизатора

8 месяцев

QA-инженер по тестированию: с нуля до автоматизатора

8 месяцев

QA-инженер по тестированию: с нуля до автоматизатора

5 месяцев

Автоматизатор тестирования на Python (TW)

Освоите Pytest, работу с API, CI/CD. Курс для тех, кто хочет перейти от ручного тестирования к востребованной профессии автоматизатора

5 месяцев

Автоматизатор тестирования на Python (TW)