Question

So i have this structure html

<span class="label" data="data/support_icon.png">
<span class="title">1 User/Location - 8Am - 8Pm Mon - Fri Support Plan - Level 1</span>
<small class="rt">0.0000</small>
</span>

and the problem is the text is too long so what i want is maybe truncate at n number of characters and when you hover over it you will get the rest of the text….I was wondering if there is a jQuery plugin that willdo this or an easy way to implement this

Answer 1

This should work in all recent browsers,

<style>
.title{
  width: 200px; 
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipses;
  -o-text-overflow: ellipses;
  text-overflow: ellipsis;
}
</style>
<span class="label" data="data/support_icon.png">
<div class="title" title="1 User/Location - 8Am - 8Pm Mon - Fri Support Plan - Level 1">1 User/Location - 8Am - 8Pm Mon - Fri Support Plan - Level 1</div>
<small class="rt">0.0000</small>
</span>

http://jsfiddle.net/EXjmn/