ключевое слово на элементах встроенного блока

Если вы закроете каждое слово в элементе <span/>, вы можете установить white-space:nowrap на этих пролетах, а текст внутри пролетов не будет завернут в середине слова, все слово будет обернуто.

Вот пример: http://jsfiddle.net/TGZ3K/4/

Примечание. Я добавил несколько JS для добавления элементов SPAN, к которым я обращаюсь, затем использовал метод .lettering() для этих .lettering(). Мне пришлось обновить CSS, чтобы он работал правильно.

Обновленный JS

$('p').html('<span>' + $("p").text().replace(/\s/g, '</span> <span>') + '</span>').children().lettering();

Обновленный CSS

p span {
    white-space:nowrap;
}

p span span {
    display: inline-block;
    width: 10px;
}

ОБНОВИТЬ

Для поддержки вложенных тегов, таких как <b/> или <em/> вы можете сделать что-то вроде этого:

$('p').html('<span>' + $("p").html().replace(/\s/gi, '</span> <span>').replace(/(<b>|<em>)/gi, '</span>$1<span>').replace(/(<\\b>|<\\em>)/gi, '</span>$1<span>') + '</span>').find("span").lettering();

Где открытие и закрытие HTML-тегов обернуты в противоположные теги <span/>. Например

какой-то текст

Превращается в:

</span><b><span>some text</span></b><span>

И тогда старое regexp делает то же самое с пробелами, которые превращают HTML в:

</span><b><span>some</span> <span>text</span></b><span>

И затем мы начинаем нашу строку HTML с открытием и завершением строки HTML с закрывающим <span/>:

<span></span><b><span>some</span> <span>text</span></b><span></span>

Будет создано дополнительное <span/>, но они не должны смешиваться с потоком HTML.