Jump to content

Truncate Listing Titles - Best Solution - CSS

Recommended Posts


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




<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: 





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.