UnluckySerivelha
@UnluckySerivelha

Как определить положение текста с помощью JS?

Есть такая разметка:
6386afbd3fdc9522043984.png
При уменьшении ширины экрана, соответственно, получается так:
6386aff21c404907809408.png

Каким образом можно узнать, при текущей ширине экрана .hint находится вместе со всем текстом, или на отдельной строке? Нужно, чтобы поменять отступы

  • Вопрос задан
  • 73 просмотра
Решения вопроса 1
Seasle
@Seasle Куратор тега CSS
\( ゚ヮ゚)/
Можно посчитать насколько блок Б (.hint) пересекается с блоком А (основным текстом), и после, с использованием полученного и порогового (задаёте сами), можно решить, что делать с блоком.
const clamp = (min, max, value) => Math.max(min, Math.min(max, value));

const calculateIntersection = (a, b) => {
    const aRect = a.getBoundingClientRect();
    const bRect = b.getBoundingClientRect();
    const top = clamp(aRect.top, aRect.bottom, bRect.top);
    const right = clamp(aRect.left, aRect.right, bRect.right);
    const bottom = clamp(aRect.top, aRect.bottom, bRect.bottom);
    const left = clamp(aRect.left, aRect.right, bRect.left);
    const width = right - left;
    const height = bottom - top;

    const totalArea = bRect.width * bRect.height;
    const intersectionArea = width * height;
    const intersectionRatio = intersectionArea / totalArea;

    return intersectionRatio;
};


Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
krdpsr
@krdpsr
сделай отступы после а не перед
то есть справа а не слева
Ответ написан
Ваш ответ на вопрос

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

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