CODEWITHSUNDEEP
phpjavascriptcss
Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

how to hide over x chars in a string

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?

Upvotes: 0

Views: 295

Answers (3)

c69
c69

Reputation: 21497

Pure CSS in modern browsers: text-overflow: ellipsis; will cut the text and show … in the end of box. You must specify width / height, so the text would overflow rather than make the container bigger. (Supported in IE7+, FF4+, modern Webkits and Opera)

Edit: noticed, you need exact per character cut. Then, to use my suggestion,e you will need mono-space font (and, possibly, em specified box width).

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150020

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;}

Upvotes: 1

Alistair Laing
Alistair Laing

Reputation: 973

Well you could have a php script file that returns the full text and then use ajax to fetch the rest of the description and replace the shortened text.

Upvotes: 0

Related Questions