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

Question

[Ivan Huk]

Есть такой дизайн


и нужно каким-то образом зарисовать градиентом текст в двух строках и одним цветом если в одном, как такое можно реализировать?

Answer 1

[Stalker_RED]

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

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

Можно конечно сделать и без этих танцев, средствами css, но вы же вопрос про js задали :)

Comments

[Павел Корнилов]

Второй вариант - самый шикарный!

[Stalker_RED]

Павел Корнилов, разве можно измерить ширину у textNode? Придется использовать обертку. Чтобы у обертки были такие-же стили как у оригинала - проще всего клонировать контейнер. Не?

[Павел Корнилов]

Stalker_RED, ага, забыл, что measureText - только в канвасе =)
Сейчас подправлю коммент.

Answer 2

[Pashok Doom]

Я бы сравнивал ширину текста и ширину блока, и если ширина текста больше на от 1.01 до 1.99 раз...
Или создать строку (чтобы точно в одну строку влезала) взять её высоту - потом удалить, а высоту сравнить с высотой текущей строки...

Answer 3

[Tim]

как вариант можно так, но лучше средствами 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
}

Comments

[Stalker_RED]

С чего бы ему вообще работать?

[Tim]

Stalker_RED, я не писал, что мой вариант единственный верный. Ну а придираться такое себе занятие. В твоем варианте если перенести, то тоже ломается

[Tim]

Stalker_RED, вот например в таких случаях он рабочий

[Stalker_RED]

Tim, вы исходите из предположения, что кто-то вручую подготовил тексты для этих блоков и как-то там разбил. А автор вопроса явно хочет это автоматизировать, потому и задает вопрос. Тот пример, который "ломается" - он вообще-то от другого вопроса.

[Tim]

Stalker_RED, предложите универсальный вариант на js? Что делать например в таких случаях?

[Tim]

Stalker_RED, а разве текст не вручную подготавливают? Объясните. Я не совсем понял эту фразу

[Stalker_RED]

Tim, текст может правиться в CMS или вообще получаться из внешних источников, которые понятия не имеют о итоговой верстке.

Что делать например в таких случаях?

У вас там текст не в <p>. Не удивительно, что стили не применяются :)

[Tim]

Stalker_RED, а где текст?

[Stalker_RED]

Tim, в теге body, между вторым и третьим p

пора вам узнать, что теги p не вкладываются :)

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

[Tim]

Stalker_RED, спасибо. этого действительно не знал. Вот переделал

[Stalker_RED]

Tim, я не понимаю что вы от меня хотите. Да, теперь у вас на первой строке пустой абзац, и он не выделяется. Это конкурс "как сломать верстку"?

[Tim]

Stalker_RED, так не я начал это все