обтекание текста вокруг прозрачного PNG с помощью CSS / JQuery / что угодно - PullRequest
Новая
       19

обтекание текста вокруг прозрачного PNG с помощью CSS / JQuery / что угодно

2 голосов
/ 27 июня 2011

На данный момент у меня есть: 

<img style="float:right;" src="/path/to/image.png">
<p>lorem ipsum dolor</p>

Что правильно устанавливает изображение и текст вокруг него. Однако возможно ли «обтекать» текст вокруг фактического содержимого изображения в формате png, игнорируя прозрачность?

Теперь это выглядит так:

before

Я бы хотел, чтобы это выглядело так:

after

Возможности, которые я вижу: 

1) Manually add breaks

Почти невозможно для динамического контента; 

2) Have php add breaks after a set number of characters

Очень сложный, и его необходимо определить для каждого изображения; 

3) Another way someone here knows about

Кто-нибудь имеет опыт работы с подобными ситуациями?

Заранее спасибо!

Ответы [ 4 ]

6 голосов
/ 15 апреля 2013

«Правильный» способ сделать это - CSS3 Shapes / Исключения (форма снаружи / внутри и т. Д.).

К сожалению, по состоянию на апрель 2013 года они еще не получили широкого применения. Chrome / Webkit имеет тест в своих канареек. Возможно, Mozilla последует дальше.

4 голосов
/ 27 июня 2011

Единственный мыслимый способ, которым я мог придумать для обтекания текста вокруг изображений без какого-либо жесткого кодирования, - это заручиться помощью jQuery. Существует плагин под названием jQSlickWrap - это может быть решение, которое вы ищете. Однако он требует поддержки HTML5 от имени браузера, поэтому пока не будет работать для пользователей IE.

0 голосов
/ 14 марта 2014

Это определенно возможно.Вам просто нужно создать пустые элементы с высотой, равной высоте строки текста и ширине, где вы хотите, чтобы текст разрывался.Затем поместите эти элементы в ваш текст в стиле clear: both CSS, и ваше изображение будет абсолютно позиционировано с z-index под текстом.

0 голосов
/ 27 июня 2011

Любое автоматическое определение точки разрыва может включать очень сложное обнаружение краев, текстовые метрики и вычисление потока, которые СЛИШКОМ сложны из-за небольшого усиления.

Единственный возможный способ, который приходит мне в голову, - это вручную приблизить изображениес несколькими плавающими прямоугольниками (DIV), которые накладывают изображение (используя HTML + CSS).

...