Let’s say that you are pulling in some data in string format to a div on your site. The only problem is you have no clue of the length of the string, and you have limited space. Often times, with a poorly programmed site, layout breaks when a div holds more characters than was originally intended:

This text will continue outside the box breaking layout

Code:

<div style=”margin:10px 0; padding:5px; white-space:nowrap;width:180px;height:20px;border:1px solid #FF0000;”>This text will continue outside the box breaking layout</div>

Now, it is common practice to set the width of the div and turn your overflow to hidden, but that can have negative side effects:

This string is just cut off in the middle of a word or letter

Code:

<div style=”margin:10px 0;padding:5px;white-space:nowrap;width:180px;height:20px;overflow:hidden;border:1px solid #0000FF;”>This string is just cut off in the middle of a word or letter</div>

A much more user friendly solution is to truncate the text and show ellipsis to let the end user know what is going on:

This text is cut with ellipsis as it continues

Code:

<div style=”margin:10px 0; padding:5px; white-space:nowrap;width:180px;height:20px;overflow:hidden;text-overflow:ellipsis;border:1px solid #00FF00;”>This text is cut with ellipsis as it continues</div>

Even better still would be some JS to pop open a div (on click) that shows the entire string (I threw together a quick example here using the Fancybox Jquery plugin):

See it in action here.
About these ads