Как ограничить длину текста css
Ответы
Вячеслав Межуревский
03 ноября 2022
Иногда бывает ситуация, когда слишком длинный текст неудобно отображать в блоке на странице, но необходимо дать пользователю информацию о том, текст большой. В данной ситуации используется 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;
}
Результат:
0
2