var createTooltip = function( sSelector ) { $.each( $(sSelector), function() { if ( this.scrollWidth > this.clientWidth ) { this.title = $(this).text().replace(/^\n|\r|\s+/g," ").trim() // firefox does not support innerText yet } }); } createTooltip('.truncate dd');
<dl class="truncate"> <dt>Name</dt> <dd>Patrick</dd> <dt>Twitter</dt> <dd><a href="http://www.twitter.com/netzaffin">@netzaffin</a></dd> <dt>Website</dt> <dd><a href="http://www.netzaffin.de">www.netzaffin.de</a></dd> <dt>Slogan</dt> <dd>hover me to read some bleeding edge web stuff</dd> </dl>
.truncate dt { width: 100px; float: left; } .truncate dd { overflow: hidden; text-overflow: ellipsis; width: 200px; white-space: nowrap; }