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

4 года назад

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

Ответы

Иногда бывает ситуация, когда слишком длинный текст неудобно отображать в блоке на странице, но необходимо дать пользователю информацию о том, текст большой. В данной ситуации используется 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