Как известно, что иногда слова, где присутствуют много знаков не сильно вписывают в дизайн, а где то просто его разрушают. И с тем, что все сайты должны быть адаптивны под мобильные телефоны, то с большими знаками, что присутствуют в словосочетаниях нужно что то делать. И здесь можно все красиво обставить, а точнее мы обрезаем те знаки, которые должны вылезти из блока или с формы,и вместо этого автоматически появляется двоеточие. Так сказать такое небольшое недосказанное понятие, что будет отличным вариантом для многих функций.
Вероятно вы уже встречали такой вид, ведь он очень популярен для однострониченого текста, как название, где мы прописываем, и она просто становится в нескольео рядов, но при нашем вмешательстве мы сделаем одну строку, которое завершается троеточием.
Однострочный текст
Код
white-space: nowrap; // Выводим текст в одну строку
overflow: hidden; // Обрезаем то, что выходит за рамки блока
text-overflow: ellipsis; // Добавляем троеточие вконце текст
Идем далее:
Многострочный текст
Код
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // Количество строк
line-height: 20px; // Для поддержки не-вебкит-браузеров, высота одной строки
max-height: 60px; // Для поддержки не-вебкит-браузеров, высота строки * количество строк
Далее:
Пример реализации обрезания текста в одну и несколько строк:
See the Pen
✂️ Обрезаем длинные строки и добавляем троеточие… by Kocsten (@kocsten)
on CodePen.
