Неловкая линия обтекания изображения

Вероятно, проще всего объяснить, что я ищу с изображением:

Когда я плаваю на картинке, вокруг него бегает текст, и это здорово. НО, в зависимости от объема текста и размера изображения, я часто остаюсь с этими неловкими битами. В этом случае неловкий текст будет выглядеть лучше в столбце рядом с изображением.

Я мог бы добавить больше нижнего поля к изображению в зависимости от того, сколько неуклюжего текста есть, НО в адаптивном дизайне изображение сжимается, и текст остается того же размера, поэтому нет способа сделать это для каждого изображения в каждой точке разрыва.

Я мог бы использовать "overflow: auto" во всех абзацах, чтобы он создавал новый контекст макета и вообще не допускал переноса текста. НО я хочу, чтобы текст плавал, когда текста достаточно, и снова я не получаю контроль над окончательным выводом.

У меня есть ощущение, что если нет слишком сложной JS, которая может работать на этом (и может справиться с изменением размера экрана на адаптивном сайте), то нет никакого решения. Поэтому мой вопрос: как люди справляются с этим? Игнорируй это? Использовать JS?

Спасибо

Источник

2 ответа

Я не думаю, что вы можете сделать это в CSS. Однако я не думаю, что JavaScript будет слишком сложным. Я бы порекомендовал использовать element.getClientRects(), который возвращает список объектов TextRectangle. Для встроенных элементов каждый объект TextRectangle представляет строку текста.

Если вы проверите, что левое смещение последнего TextRectangle отличается от левого смещения предпоследнего TextRectangle, вы знаете, что последняя строка является "отставшей" и может отрегулировать нижнее поле изображения на высоту одного TextRectangle (bottom - top).

getClientRects был стандартизирован в CSSOM, но может иметь ошибки в некоторых браузерах.

С более личной точки зрения, я бы сказал, что я думаю, что все выглядит так, как есть, и я бы не стал беспокоиться об этом на вашем месте.

Источник

Самое простое решение этой проблемы - добавить еще один DIV вокруг вашего текста и всплыть, что осталось.

Таким образом, ваш HTML будет выглядеть так:

<div>
    <img src="">
    <div>
        My text...
    </div>
</div>
Источник
Другие вопросы по тегам