vanyahuk7
@vanyahuk7
Co-founder beauto.com.ua co-founder limgro.com - W

Как средствами js определить что текст в две строки?

Есть такой дизайн
5f64696fb6d25726520778.png

и нужно каким-то образом зарисовать градиентом текст в двух строках и одним цветом если в одном, как такое можно реализировать?
  • Вопрос задан
  • 206 просмотров
Решения вопроса 1
Stalker_RED
@Stalker_RED
1. клонируем элемент
2. выставляем ему абсолютное позиционирование, сдвигаем в невидимую область (left: -5000px, например)
3. ставим туда одну букву, замеряем высоту строки
4. ставим весь текст, замеряем высоту.
Если высота изменилась - значит строк больше одной - PROFIT!

Можно текст вставлять не целиком, а по одному слову. Чтобы понять в каком месте перенос
Вот было что-то похожее: Как разбить текст на строки JS?

Можно конечно сделать и без этих танцев, средствами css, но вы же вопрос про js задали :)
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Benzin102
@Benzin102
Shitcoder
Я бы сравнивал ширину текста и ширину блока, и если ширина текста больше на от 1.01 до 1.99 раз...
Или создать строку (чтобы точно в одну строку влезала) взять её высоту - потом удалить, а высоту сравнить с высотой текущей строки...
Ответ написан
Tim-A-2020
@Tim-A-2020 Куратор тега JavaScript
как вариант можно так, но лучше средствами css сделать как предложил Stalker_RED
//получаем элемент внутри которого есть текст
const el = document.querySelector('.test');
//убираем по краям пустоту. Создаем массив по переносу строки и смотрим длину массива
const count = el.textContent.trim().split("\n").length;
if (count === 1) {
    //code
} else if (count === 2) {
    //code
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы