Обтекание текста при position absolute, как добиться?

Question

[vasil77]

Как добиться обтекание картинки текстом. Применял и абсолютное позиционирование и margin' ами пробовал, результат удручающий. Пример кода и самой проблемы

<div class="feedback_slider__box">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti fugiat, suscipit magni. 
              Fuga eum praesentium molestias porro, mollitia minima commodi!
        </p>
        <img class="feedback_slider__img_bttm" src="img/feedback/1.jpg" alt="Фото">
</div>

К тегу p применён box-shadow на углу которого и нужно спозиционировать элемент

Answer 1

[Сергей delphinpro]

Раньше этого сделать было нельзя.
Сейчас в спецификации появилось описание технологии css-shapes (см. на MDN).
Но, увы, поддержка на текущий момент слабовата — can i use css-shapes?

Попробуйте компромиссный вариант. Первую строку сделайте абзацем (text-indent) и увеличьте внутренний отступ у прямоугольника, чтобы остальные строки не лезли под картинку.

Comments

[vasil77]

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

[Сергей delphinpro]

vasil77, как вариант можно использовать этот компромисс в качестве фоллбека, а для хромиумов (коих большинство) написать стили с шейпами через @supports.
Заказчику показывать сайт в хроме =))

[vasil77]

Сергей, спасибо применил text-indent, подошло, как надо! про заказчика в точку :)