页面调整大小或缩放时自动减去单词

i would like to know how can i make my title in divs automatically substracted to a certain number to stay fitting the div when resizing window or zooming website as youtube.com do ?

im substracting words like that

   $string = (strlen($title) > 13) ? substr($title,0,26).'..' : $title;

   echo "<div>";
   echo $string;
   echo "</div>;

But i dont know how to do this automatically so it can substract more letters to fit the div.

now what i have is when page resized or zoomed the title stay long and will out of the div.

how can i fix this with php or javascript thanks. i tried looking how youtube doing it but no luck.

You can use CSS3 text-overflow: ellipsis like this:

<div style="text-overflow: ellipsis;width:5%;overflow: hidden">
     Some text
</div>

Try with the fiddle: http://jsfiddle.net/bBTaU/ Resize the window and see

EDIT

Not all browsers support CSS3, you can use a plugin like this http://dotdotdot.frebsite.nl/ to extend the support in old browser