Как сделать обтекание картинки текстом и победить перенос строки вниз?

программирование css img word-wrap

Доброго времени суток!

Вопрос, казалось бы, простой, но поставил в тупик.
http://codepen.io/joe/pen/AnuEF
В этом примере переносы есть и обтекание тоже, но почему длинная строка переносится сразу за картинку? Как "прилепить" оченьдлиннуюстроку вверх, к остальному тексту?

Спасибо!

Примечание:
wmuzz, пробовал добавлять его с помощью wordwrap($str,30,'&shy',true), но выглядит очень нестабильно.
Например, это вообще никуда не годится: http://cl.ly/LxgH

Примечание:
> А как по-вашему должны выглядеть слова длиной в 100 букв?
В том-то и загвоздка! Как тогда сказать браузеру "вставляй текст между первой попавшейся слева и границей справа не разбивая вертикально далеко, нарушать правила языка можно"? (:
Зачем мне это? Так в ТЗ написано, да и более логично, чем одна строка на всю высоту картинки!

Примечание:
wmuzz, сначала хочу сказать спасибо, что посещаете вопросы, на которые дали ответы!

> Вам нужен автоматический перенос в том месте, где слово подходит к концу строки?
Да, именно так. Неважно где именно – должен быть простой перенос слова на следующую строку если он выходит за границы блока (да хоть бы и с фиксированной шириной).

1. Моноширинный не вариант (это ТЗ).
2. Пробовал, но без моноширинного разница невелика – в разных браузерах на одном ноуте разрыв между словами может варьироваться от 4px до 20px при ширине блока в 600px!
3. Интересное свойство, пойду погуглю, не слышал о таком. Спасибо (:
4. Хм, стараюсь не использовать js там, где можно обойтись css3. Хотя, если он будет быстрее, чем php.

Я уже даже начал думать над использованием explode(' ',$str), не забывая проверять на запятые (между которыми некоторые "грамотеи" могут и не поставить ни одного пробела) и выводить циклично с проверкой на длину каждого элемента массива (читай: слова)..
Мне казалось, что уж в нашем-то году должно быть более простое и очевидное решение для такой простейшей задачи.

Примечание:
Сделаю в итоге по решению №2 как самый простой вариант с наименьшими косяками всё-таки. Пусть будет фичей, а не багом (:
Ответы:
Вставить в очень длинное слово тег <wbr> в местах, где допустим перенос.
http://htmlbook.ru/html/wbr


11 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.