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

[TrogWar]

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

Вопрос простой, но поставил в тупик. Нуждаюсь в вашей помощи.

Так нужно: http://cl.ly/Lxfv

Как есть сейчас: http://codepen.io/joe/pen/AnuEF

У меня два вопроса:

1 – Почему длинная строка переносится сразу после картинки?

2 – Каким образом "прилепить" оченьдлиннуюстроку вверх, обратно к остальному тексту?

Спасибо!

ps: Пробовал использовать

wordwrap($string,'­',true)

, но не смог придумать как определять ширину текста без моноширинного (ибо 40 символов в одном браузере это одно, а в другом уже другое).

Пробовал шаманить с word-wrap, text-wrap и white-space, но, видимо, чего-то не понимаю ибо не удалось добиться адекватного результата.

[npofopr]

А куда ж ей деваться то, если в ней нет пробелов?

Все логично, слово не влазит в свой блок -> уходит вниз.

Сделайте блоку overflow: hidden; а спану word-wrap: normal; и не будет переноситься.

Зачем вам вообще это нужно?

[TrogWar]

Спасибо, npofopr за отклик!

Если сделать overflow:hidden;, не будет виден текст, верно? А мне он нужен.

Я верстаю ленту новостей, тот блок в примере – одна новость. Почему именно одна картинка слева-вверху и много текста, который её обтекает? Так написано и даже нарисовано в ТЗ.

А борюсь именно с длинными строками чтобы сделать "защиту от дурака" (их там много).

Edited January 5, 2013 by TrogWar

[npofopr]

Ну... можно еще обрабатывать текст через php или js, т.е. искать очень длинный текст и "резать" его, т.е. вставлять многоточие например.

[TrogWar]

Ну... можно еще обрабатывать текст через php или js, т.е. искать очень длинный текст и "резать" его, т.е. вставлять многоточие например.

Да, можно. Я пробовал в пхп обрабатывать, алгоритм примерно таков:

<?php
$str = 'blah-blah-blah';
$str_new = mb_wordwrap($str,40,'­',true,'UTF-8');
echo ('
<div class="box">
<img src=""/>
<span title="'.$str.'">'.$str_new.'</span>
</div>
');
?>

Но выглядит оно нестабильно - где-то более-менее, а где-то вот так:

Что уже плохо.

А если обрезать и ставить многоточие

// ...
$str_new = mb_substr($str,0,40,'UTF-8');
// ...

то будет совсем тихий ужас ведь нужно обрезать только одно слово, длиннее n символов (всплывашка есть, конечно же):

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

Edited January 5, 2013 by TrogWar

[npofopr]

попробуй совета попросить тут http://artgorbunov.ru/bb/soviet/

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

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