Adjusting the element size would be a bad idea. First, you won't be able to correctly estimate the size of some text in Javascript. Even if you have complete information of the font metrics and textual content and full power of programming and raw OS API (which you don't have access to in Javascript), this is a notoriously difficult problem, due to font hinting and other complications. And, after all, some code needs to add '…' (by the way,
…, not three dots).
You really need to leave the element self-sizing, depending on the content, and dynamically change the content to show few first words and
…. You can do it with Javascript. For this purpose, you would need to calculate shortened versions of the text and remember those values in the code (this is good to do with Javascript array, which works as the associative container, with O(1) complexity of the search). Then you need to handle hover events (for example; it could be something else, according to your design) to show full or shortened text. The size of the
div will be automatically adjusted depending in its inner HTML and CSS (padding).
To handle such events, it's the best to use jQuery, for example:
http://api.jquery.com/hover[
^].
Calculation of shortened text can be done using the function
split():
http://www.w3schools.com/jsref/jsref_split.asp[
^].
If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery[
^],
http://jquery.com[
^],
http://learn.jquery.com[
^],
http://learn.jquery.com/using-jquery-core[
^],
http://learn.jquery.com/about-jquery/how-jquery-works[
^] (start from here).
—SA
Submit an article or tip