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

Для того чтобы проверить умещается ли контекст в своем контейнере, можно использовать очень простую функцию overflow, которая вернет false, если текст умещается и true если иначе.

function overflow(e) {
	return e.scrollWidth > e.offsetWidth || e.scrollHeight > e.offsetHeight;
}

function overflow(e) {

return e.scrollWidth > e.offsetWidth || e.scrollHeight > e.offsetHeight;

}

Пример использования:

HTML:

<div class="block">текст</div>

1	<div class="block">текст</div>

CSS:

.block {
	height: 240px;
	overflow: hidden;
}

.block {

height: 240px;

overflow: hidden;

}

JS:

function overflow(e) {
	return e.scrollWidth > e.offsetWidth || e.scrollHeight > e.offsetHeight;
}
let bl = document.querySelector('.block');
if (overflow(bl)) {
	// Текст не умещается
	} else {
	// Текст умещается
}

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.

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

Пример этого обработчика:

function check() {	
	let bl = document.querySelector('.block');
	if (overflow(bl)) {
		// Текст не умещается
		} else {
		// Текст умещается
	}
}
window.addEventListener("resize", check);
check();

function check() {