cut html content and keep the format?

$str = "<div>blahblahblah<b>foofoo</b><i>barbar</i></div>";

I separate two part

1-presentation_text
2-full content when click on rea开发者_如何学Cd more.

  $presentation  = substr($str,0,23);
 <div>blahblahblah<b>foo
  $detail = substr($str,23); 
  foo</b><i>barbar</i></div>

How Can I keep the format when it display in presentation block and detail block? I mean

in presentation block should be:

blahblahblahfoo /* foo have bold here*/

in detail block

foobarbar /* foo have bold too*/

Much easier to do it client-side:

CSS

.presentation {
    width: 200px;
    height: 20px;
    overflow: hidden;
}
.detail {
    width: auto;
    height: auto;
}

Javascript

$(function(){
    $('.presentation').live('click', function(){
        $(this).attr('class', 'detail');
    });

    $('.detail').live('click', function(){
        $(this).attr('class', 'presentation');
    });
});

HTML

<div class="presentation">
    <div>blahblahblah<b>foofoo</b><i>barbar</i></div>
</div>

Working example: http://jsfiddle.net/fznWf/1/