Jump to content
plethoraonline-1492071863

Truncate Listing Titles - Best Solution - CSS

Recommended Posts

plethoraonline-1492071863

Sometimes you need to truncate the listing titles in Listing Pages, also on Detail page and the code provided in Jreviews does its work, but what heappens if someone wants to read the full tittle for any reason?

 

Here is a solution i managed to do it today.

 

<?php echo $listing['Listing']['title'];?>    -  my case is using the tittle without the link in the Detail Page.

 

What i do is adding it inside div tags and add the id truncate, you can also use a class

 

<div id="truncate"><?php echo $listing['Listing']['title'];?></div>   With ID

 

or

 

<div class="truncate"><?php echo $listing['Listing']['title'];?></div>     With CLASS

 

and use the css code below.

 

#truncate {max-width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

#truncate:hover{overflow: visible; white-space: normal; width: 100%;position: absolute;background-color:#f2f2f2;z-index:1000;;margin-right:-8px;padding: 0px 10px 8px 8px;cursor:pointer;}

My case is using an ID. If you want to use the class replace #truncate with .truncate

 

 

you can see an example here: 

 

https://www.eduaktiv.al/programet/master-i-shkencave/inxhinieri-ndertimi-inxhinieri-e-strukturave-te-ndertimit

 

 

Hope it helps.

 

Share this post


Link to post

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Please refer to our Privacy Policy.