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

Question

[Dymok]

Есть такая разметка:

При уменьшении ширины экрана, соответственно, получается так:


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

Answer 1

[Александр]

Можно посчитать насколько блок Б (.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;
};

Answer 2

[от это да]

сделай отступы после а не перед
то есть справа а не слева

Comments

[Dymok]

Дело ещё и в отступе вертикальном

[от это да]

аналогично - делай отступы снизу а не сверху