Safari/Chrome white-space: nowrap text over run

Question

У меня есть текст без пробелов и в нем я хочу иметь span с текстом с пробелами. Я хочу, чтобы этот диапазон был компактным или неразрезанным. То есть когда он не полностью виден, он должен быть на следующей строке.

У меня есть этот пример: http://jsfiddle.net/ysdWb/

<div id="url" contenteditable="true">SomeLongTextWithoutWhiteSpace/ItMightBeForExampleURL<span class = "bubble" contenteditable="false">Text in bubble<img src="http://www.mp.bastrnak.cz/icon/icq.png" /></span>ContinueOfSomeLongTextWithoutWhiteSpace/<span class = "bubble" contenteditable="false">Text in bubble<img src="http://www.mp.bastrnak.cz/icon/icq.png" /></span>/ItMightBeForExampleURL</div> 

я использую Пробельные: Nowrap; и word-wrap: break-word; в моем css.

(попробуйте изменить границы страницы или изменить текст, чтобы увидеть, как «пузыри» уходят с экрана) Этот код в скрипке отлично работает в Firefox. Есть ли решение для Chrome и Safari сделать то же самое? Спасибо за помощь.

Answer 1

Хорошо, я не уверен на 100%, я понял, какой эффект вы ищете, но так ли это?

Я добавил display:inline-block в класс .bubble, и я не смог заставить пузырьки исчезать со стороны экрана при изменении размера окна в Chrome.

http://jsfiddle.net/ysdWb/6/