Для того чтобы проверить умещается ли контекст в своем контейнере, можно использовать очень простую функцию overflow
, которая вернет false
, если текст умещается и true
если иначе.
1 2 3 |
function overflow(e) { return e.scrollWidth > e.offsetWidth || e.scrollHeight > e.offsetHeight; } |
Пример использования:
HTML:
1 |
<div class="block">текст</div> |
CSS:
1 2 3 4 |
.block { height: 240px; overflow: hidden; } |
JS:
1 2 3 4 5 6 7 8 9 |
function overflow(e) { return e.scrollWidth > e.offsetWidth || e.scrollHeight > e.offsetHeight; } let bl = document.querySelector('.block'); if (overflow(bl)) { // Текст не умещается } else { // Текст умещается } |
Наглядный пример:
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.
Данный пример немного отличается от представленных выше кодов, но принцип его работы тот же. В нем также сделан обработчик события изменения размера документа, поэтому можно изменить размер окна браузера и посмотреть умещается ли текст при этих изменениях.
Пример этого обработчика:
1 2 3 4 5 6 7 8 9 10 |
function check() { let bl = document.querySelector('.block'); if (overflow(bl)) { // Текст не умещается } else { // Текст умещается } } window.addEventListener("resize", check); check(); |
Добавить комментарий: