Свойство CSS «text-overflow: ellipsis» используется для обрезания текстового содержимого, когда оно превышает доступное пространство внутри элемента. При применении со значением «2 строки» оно указывает, что текст должен быть обрезан и добавлено многоточие (…) после двух строк текста.
Вот несколько методов, которые можно использовать для достижения эффекта «переполнение текста: многоточие в 2 строки»:
-
Метод CSS:
.your-element { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
-
Метод JavaScript:
const element = document.querySelector('.your-element'); const lineHeight = parseInt(getComputedStyle(element).lineHeight); const maxLines = 2; const maxHeight = lineHeight * maxLines; while (element.offsetHeight > maxHeight) { element.textContent = element.textContent.replace(/\W*\s(\S)*$/, '...'); }
-
Серверный метод:
Если вы генерируете контент на стороне сервера, вы можете использовать серверные языки программирования, такие как PHP, Python или Ruby, чтобы урезать текст до двух строк и добавить многоточие..