ИП Иванов Д. А.

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

теги:

Категории

Рубрики
от 43000 
Ведем кабинеты ВК под ключ. Стоимость работ в месяц 10% от рекламного бюджета, но не менее 15тыс рублей в месяц.
от 15000 
В анализ конкурентов входит:
  • Анализ UX/UI сайта
  • Сбор и кластеризация семантики
  • Анализ конкурентов Я. Директ
  • Анализ конкурентов SEO
  • Формирование ТЗ и рекомендаций
  • Формирование стратегий
от 18200 

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

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

Пример:

HTML:

<p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet lectus et felis placerat pharetra.</p>

CSS:

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

В этом примере мы создаем абзац с длинным текстом и задаем ему класс .ellipsis. Затем мы устанавливаем свойство white-space: nowrap;, чтобы текст не переносился на следующую строку и не было отступов в конце каждой строки. Затем мы задаем overflow: hidden;, чтобы скрыть любой текст, который находится за пределами блока абзаца. И наконец, мы используем свойство text-overflow: ellipsis;, чтобы добавить троеточие в конце текста при его обрезке.

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

Поделиться:

Комментарии

Оставьте комментарий

Задать вопрос

Мы ответим в ближайшее время!

Отправляя заявку вы даете согласие на обработку персональных данных.

Вступайте в наш телеграм чат. Задавайте вопросы, помогайте другим.