The column which has the description field in the Pageblocktable is showing multiple lines, increasing the height of a row. I want to restrict ONLY one line (default height) per row in the table.

I'm able to do this using OVERFLOW:HIDDEN property in CSS but it is pulling the whole data. I wanted to try the JavaScript substring method in this. I've used JavaScript substring method in a vf page to show ONLY the allowed number of characters in a output text.

I would like to know how to use the JavaScript substring method for a column(Description) in a Pageblocktable to pull only limited number of characters for all values when the page loads and show ONLY one line for a row with default height.

  • 1
    can you post how you pull the data, are you using controller or javascript remoting purely to populate the data in the table?
    – Rao
    Commented May 27, 2014 at 17:24

2 Answers 2


If you are just wanting to truncate the data once the page has loaded you can add a CSS class to the column in the Visualforce:

<apex:column styleClass="truncate" ... />

and truncate the text by using that class in a jQuery selector like this:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
var j$ = jQuery.noConflict();
j$(document).ready(function() {
    j$('td.truncate').each(function() {
        var td = j$(this);
        td.text(td.text().substring(0, 50));

/* This will work when window's size is less than 768. Please remove If conditions if you want to work it for all window size.*/

if ( $(window).width()

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .