php - how to hide over x chars in a string

Question

it's very common to substring an item description if it's too long,

But how could show it back?

i was thinking

if string length is > x
   insert after position x a <span classs="more">   //probably i'd do this through php
   insert at the end of the string </span> 
   hide ".more"  //css & javascript to hide and show

and then you can simply use a technique like: toogle parent's element with parent

Do you see any alternative for this?

Answer 1

You can do it without JavaScript assuming you don't care about support for old browsers that don't understand the CSS :hover pseudo-class (e.g., IE6 only does :hover for <a> elements).

Something like this:

<style>
.full { display: none; }
.shortened:hover .full { display: inline; }
</style>

<span class="shortened">This is some text that <span class="full">has been cropped.</span></span>

In case it's not obvious what this is doing, the first CSS selector hides all elements with the class "full". The second selector shows elements with the class of "full" if they are a child of an element with class "shortened" that also has the mouse over it.

If there are other elements after the outside span they'll temporarily move over to make room while the extra text is visible - a simple way to avoid this is as follows (tweak to suite your taste):

.shortened { position: relative; }
.full { display: none; position: absolute;}
.shortened:hover .full { display: inline; z-index: 100; background-color: white;}